1.  

  1. <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>Document</title>
  9.      <style>
  10.          /* 清除浏览器的内边距和外边距 */
  11.  
  12.          * {
  13.              margin: ;
  14.              padding: ;
  15.          }
  16.  /* 这是外面大盒子的样式 */
  17.             #box {
  18.              /* 给大盒子一个宽度和高度 */
  19.              width: 200px;
  20.              height: 200px;
  21.              /* 让他离顶部250像素居中对齐 */
  22.              margin: 250px auto;
  23.              /* 这里是给他子级的一个相对定位 */
  24.              position: relative;
  25.              /* 这里把原有的模型转换为3D状态 */
  26.              transform-style: preserve-3d;
  27.              /* 这里在给他一个透视的视角 */
  28.              transform: perspective(800px);
  29.              /* 这里是调用下面的@keyframes 参数  linear代表匀速，infinite代表一直循环*/
  30.              animation: ro 6s linear infinite;
  31.          }
  32.  
  33.          #box>div {
  34.              width: 200px;
  35.              height: 200px;
  36.              /* 这里是里离他的父级头部和左部为零一样 宽高 */
  37.              position: absolute;
  38.              top: ;
  39.              left: ;
  40.              /* 这里是动画的一个过渡效果执行0.5s完成 */
  41.              transition: .5s;
  42.          }
  43.  
  44.          #box>.top {
  45.              /* 这里是插入背景图片 */
  46.              background: url("田勇.jpg");
  47.              /* 设置背景图片和盒子大小宽高一样 */
  48.              background-size: % %;
  49.              /* 这是设置他的动画向Y轴负一百像素 X轴旋转90度 */
  50.              transform: translateY(-100px) rotateX(90deg)
  51.          }
  52.  
  53.          #box>.bottom {
  54.              background: url("田勇.jpg");
  55.              background-size: % %;
  56.              transform: translateY(100px) rotateX(90deg)
  57.          }
  58.  
  59.          #box>.left {
  60.              background: url("田勇.jpg");
  61.              background-size: % %;
  62.              transform: translateX(-100px) rotateY(90deg)
  63.          }
  64.  
  65.          #box>.right {
  66.              background: url("田勇.jpg");
  67.              background-size: % %;
  68.              transform: translateX(100px) rotateY(90deg)
  69.          }
  70.  
  71.          #box>.prev {
  72.              background: url("田勇.jpg");
  73.              background-size: % %;
  74.              transform: translateZ(-100px)
  75.          }
  76.  
  77.          #box>.back {
  78.              background: url("田勇.jpg");
  79.              background-size: % %;
  80.              transform: translateZ(100px)
  81.          }
  82.  
  83.  /* 这是里面内的盒子的样式 方法跟外面盒子一样 */
  84.          .box1 {
  85.              width: 100px;
  86.              height: 100px;
  87.              position: absolute;
  88.              left: 50px;
  89.              top: 50px;
  90.              position: relative;
  91.              transform-style: preserve-3d;
  92.          }
  93.  
  94.          #box>.box1>div {
  95.              width: 100px;
  96.              height: 100px;
  97.              position: absolute;
  98.              top: ;
  99.              left: ;
  100.              transition: .5s;
  101.              opacity: ;
  102.          }
  103.  
  104.          #box>.box1>.top1 {
  105.              background: url("田勇.jpg");
  106.              background-size: % %;
  107.              transform: translateY(-50px) rotateX(90deg)
  108.          }
  109.  
  110.          #box>.box1>.bottom1 {
  111.              background: url("田勇.jpg");
  112.              background-size: % %;
  113.              transform: translateY(50px) rotateX(90deg)
  114.          }
  115.  
  116.          #box>.box1>.left1 {
  117.              background: url("田勇.jpg");
  118.              background-size: % %;
  119.              transform: translateX(-50px) rotateY(90deg)
  120.          }
  121.  
  122.          #box>.box1>.right1 {
  123.              background: url("田勇.jpg");
  124.              background-size: % %;
  125.              transform: translateX(50px) rotateY(90deg)
  126.          }
  127.  
  128.          #box>.box1>.prev1 {
  129.              background: url("田勇.jpg");
  130.              background-size: % %;
  131.              transform: translateZ(-50px)
  132.          }
  133.  
  134.          #box>.box1>.back1 {
  135.              background: url("田勇.jpg");
  136.              background-size: % %;
  137.              transform: translateZ(50px)
  138.          }
  139.  /* 这里是定义他的一个动画的进度效果 */
  140.          @keyframes ro {
  141.              % {
  142.                  transform: rotate() rotateX(45deg) rotateY(-180deg);
  143.              }
  144.              % {
  145.                  transform: rotate(360deg) rotateX(45deg) rotateY(180deg);
  146.              }
  147.          }
  148.  /* 这里的hover是当鼠标移入在大盒子 上面就会发生的动画 translateY是改变移动的方向有X轴和Y轴和Z轴 */
  149.          #box:hover>.top {
  150.              transform: translateY(-150px) rotateX(90deg)
  151.          }
  152.  
  153.          #box:hover>.bottom {
  154.              transform: translateY(150px) rotateX(90deg)
  155.          }
  156.  
  157.          #box:hover>.left {
  158.              transform: translateX(-150px) rotateY(90deg)
  159.          }
  160.  
  161.          #box:hover>.right {
  162.              transform: translateX(150px) rotateY(90deg)
  163.          }
  164.  
  165.          #box:hover>.prev {
  166.              transform: translateZ(-150px)
  167.          }
  168.  
  169.          #box:hover>.back {
  170.              transform: translateZ(150px)
  171.          }
  172.      </style>
  173.  </head>
  174.  
  175.  <body>
  176.      <!-- 这是外面的盒子 -->
  177.      <div id="box">
  178.          <!-- 这是里面的盒子 -->
  179.          <ul class="box1">
  180.              <div class="top1"></div>
  181.              <div class="bottom1"></div>
  182.              <div class="left1"></div>
  183.              <div class="right1"></div>
  184.              <div class="prev1"></div>
  185.              <div class="back1"></div>
  186.          </ul>
  187.          <div class="top"></div>
  188.          <div class="bottom"></div>
  189.          <div class="left"></div>
  190.          <div class="right"></div>
  191.          <div class="prev"></div>
  192.          <div class="back"></div>
  193.      </div>
  194.  </body>
  195.  
  196.  </html>

transform动画的一个3D的正方体盒子的更多相关文章

  1. WPF 3D：简单的Point3D和Vector3D动画创造一个旋转的正方体

    原文:WPF 3D:简单的Point3D和Vector3D动画创造一个旋转的正方体 运行结果: 事实上很简单,定义好一个正方体,处理好纹理.关于MeshGeometry3D的正确定义和纹理这里就不多讲 ...

  2. CSS3D动画制作一个3d旋转的筛子

    希望这个demo能让大家理解CSS3的3d空间动画(其实是个假3D) 首先给一个3d的解剖图,x/y/z轴线轴线已经标出 下面附上添加特效的动画旋转 可以根据demo并参考上面解剖图进行理解 < ...

  3. 一个3D正方体

    一个小例子,3D的正方体 <!DOCTYPE html> <html oncontextmenu=self.event.returnValue=false onselectstart ...

  4. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  5. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  6. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  7. 3d转换-正方体-Html5Css3-遁地龙卷风

    (-1) 写在前面 我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...

  8. 使用 CSS3 动画实现的 3D 图片过渡特效

    这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...

  9. 第一章 用three.js创建你的第一个3D场景

    第一章 用three.js创建你的第一个3D场景 到官网下载three.js的源码和示例. 创建HTML框架界面 第一个示例的代码如下: 01-basic-skeleton.html 位于 Learn ...

随机推荐

  1. Python 发送邮件案例

    文件形式的邮件 #!/usr/bin/env python #coding: utf-8 import smtplib from email.mime.text import MIMEText fro ...

  2. maven dependendency

    登录|注册     zhengsj的专栏       目录视图 摘要视图 订阅 [公告]博客系统优化升级     [收藏]Html5 精品资源汇集     博乐招募开始啦       Maven De ...

  3. 问题记录-Get data from file(fonts/arial.ttf) failed, error code is 32

    time:2015/04/19 1. 描述:运行cocos的cpp-test例子,结果修改了代码之后提示错误:Get data from file(fonts/arial.ttf) failed, e ...

  4. INSERT CLAUSE

    a.single table insert INSERT INTO jobs(job_id,job_title,min_salary,Max_Salary) VALUES('IT_PM','PROJE ...

  5. c# winform文本框数字，数值校验

    文本框数字,数值校验 public void DigitCheck_KeyPress(object sender, KeyPressEventArgs e) { e.Handled = !char.I ...

  6. java内部类之成员内部类之匿名内部类

    匿名内部类特点:1.匿名内部类是没有名称的内部类,没办法引用它们.必须在创建时,作为new语句的一部分来声明并创建它们的实例.2.匿名内部类必须继承一个类(抽象的.非抽象的都可以)或者实现一个接口.如 ...

  7. Autorelease 性能测试

    __weak NSString *string_weak_ = nil; - (void)viewDidLoad { [super viewDidLoad]; // 场景 1 NSString *st ...

  8. Java集合源码 -- Collection框架概述

    1.概述 collection框架是用于处理各种数据结构的,要根据各种数据结构的特点理解它 它能够保存对象,并提供很多的操作去管理对象,当你面临下面的情况时,也许你应该考虑用集合类 1.容器的长度是不 ...

  9. WEB安全 asp+access注入

    asp+access注入 数据库 (access数据库没有数据库名) 表名 字段(列名) 记录(行,内容) 注入常用函数: top n 表示查询结果的第n个记录 len() 函数返回文本字段中值的长度 ...

  10. [转].NET设计模式系列文章

    最初写探索设计模式系列的时候,我只是想把它作为自己学习设计模式的读书笔记来写,可是写到今天,设计模式带给我的震撼,以及许多初学者朋友的热心支持,让我下定决心要把这个系列写完写好,那怕花上再多的时间也无 ...