<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         /* 清除浏览器的内边距和外边距 */

         * {

             margin: ;

             padding: ;

         }

 /* 这是外面大盒子的样式 */

            #box {

             /* 给大盒子一个宽度和高度 */

             width: 200px;

             height: 200px;

             /* 让他离顶部250像素居中对齐 */

             margin: 250px auto;

             /* 这里是给他子级的一个相对定位 */

             position: relative;

             /* 这里把原有的模型转换为3D状态 */

             transform-style: preserve-3d;

             /* 这里在给他一个透视的视角 */

             transform: perspective(800px);

             /* 这里是调用下面的@keyframes 参数  linear代表匀速，infinite代表一直循环*/

             animation: ro 6s linear infinite;

         }

         #box>div {

             width: 200px;

             height: 200px;

             /* 这里是里离他的父级头部和左部为零一样 宽高 */

             position: absolute;

             top: ;

             left: ;

             /* 这里是动画的一个过渡效果执行0.5s完成 */

             transition: .5s;

         }

         #box>.top {

             /* 这里是插入背景图片 */

             background: url("田勇.jpg");

             /* 设置背景图片和盒子大小宽高一样 */

             background-size: % %;

             /* 这是设置他的动画向Y轴负一百像素 X轴旋转90度 */

             transform: translateY(-100px) rotateX(90deg)

         }

         #box>.bottom {

             background: url("田勇.jpg");

             background-size: % %;

             transform: translateY(100px) rotateX(90deg)

         }

         #box>.left {

             background: url("田勇.jpg");

             background-size: % %;

             transform: translateX(-100px) rotateY(90deg)

         }

         #box>.right {

             background: url("田勇.jpg");

             background-size: % %;

             transform: translateX(100px) rotateY(90deg)

         }

         #box>.prev {

             background: url("田勇.jpg");

             background-size: % %;

             transform: translateZ(-100px)

         }

         #box>.back {

             background: url("田勇.jpg");

             background-size: % %;

             transform: translateZ(100px)

         }

 /* 这是里面内的盒子的样式 方法跟外面盒子一样 */

         .box1 {

             width: 100px;

             height: 100px;

             position: absolute;

             left: 50px;

             top: 50px;

             position: relative;

             transform-style: preserve-3d;

         }

         #box>.box1>div {

             width: 100px;

             height: 100px;

             position: absolute;

             top: ;

             left: ;

             transition: .5s;

             opacity: ;

         }

         #box>.box1>.top1 {

             background: url("田勇.jpg");

             background-size: % %;

             transform: translateY(-50px) rotateX(90deg)

         }

         #box>.box1>.bottom1 {

             background: url("田勇.jpg");

             background-size: % %;

             transform: translateY(50px) rotateX(90deg)

         }

         #box>.box1>.left1 {

             background: url("田勇.jpg");

             background-size: % %;

             transform: translateX(-50px) rotateY(90deg)

         }

         #box>.box1>.right1 {

             background: url("田勇.jpg");

             background-size: % %;

             transform: translateX(50px) rotateY(90deg)

         }

         #box>.box1>.prev1 {

             background: url("田勇.jpg");

             background-size: % %;

             transform: translateZ(-50px)

         }

         #box>.box1>.back1 {

             background: url("田勇.jpg");

             background-size: % %;

             transform: translateZ(50px)

         }

 /* 这里是定义他的一个动画的进度效果 */

         @keyframes ro {

             % {

                 transform: rotate() rotateX(45deg) rotateY(-180deg);

             }

             % {

                 transform: rotate(360deg) rotateX(45deg) rotateY(180deg);

             }

         }

 /* 这里的hover是当鼠标移入在大盒子 上面就会发生的动画 translateY是改变移动的方向有X轴和Y轴和Z轴 */

         #box:hover>.top {

             transform: translateY(-150px) rotateX(90deg)

         }

         #box:hover>.bottom {

             transform: translateY(150px) rotateX(90deg)

         }

         #box:hover>.left {

             transform: translateX(-150px) rotateY(90deg)

         }

         #box:hover>.right {

             transform: translateX(150px) rotateY(90deg)

         }

         #box:hover>.prev {

             transform: translateZ(-150px)

         }

         #box:hover>.back {

             transform: translateZ(150px)

         }

     </style>

 </head>

 <body>

     <!-- 这是外面的盒子 -->

     <div id="box">

         <!-- 这是里面的盒子 -->

         <ul class="box1">

             <div class="top1"></div>

             <div class="bottom1"></div>

             <div class="left1"></div>

             <div class="right1"></div>

             <div class="prev1"></div>

             <div class="back1"></div>

         </ul>

         <div class="top"></div>

         <div class="bottom"></div>

         <div class="left"></div>

         <div class="right"></div>

         <div class="prev"></div>

         <div class="back"></div>

     </div>

 </body>

 </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. 一张图看懂 JS 原型链

    JS 原型链,画了张图,终于理清楚各种关系有木有 写在最后: __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! function Person() { } 是函 ...

  2. Taro 是一套遵

    https://github.com/NervJS/taro 使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序.H5.React-Nat ...

  3. Scratch3.0——作品截图

    原文地址:https://blog.csdn.net/weiwoyonzhe/article/details/86603217 Scratch 的舞台是基于canvas,最初尝试直接通过canvas的 ...

  4. sort 、sorted、range、join方法 数字的正序、倒叙、翻转

    大家可以想象一下 如果一串数字 是混乱的没有顺序这个时候你想要排序怎么办呢?  这个时候顺势而生的就有了sort方法 把数字从大到小的排列----->sort() 只对列表 li = [3, 5 ...

  5. time random sys 模块

    time模块 顾名思义就是时间模块 我们在之前就用过一些时间模块 比如你想要让打印的时间延迟就time.sleep() 首先我们知道这是一个时间操作的模块 它可以分为三种模式:时间戳模式.格式化时间模 ...

  6. 监控事件日志关键字规则（EventDescription）

    新建规则--基于NT事件日志--自定义条件:EventDescription - 包含 - 关键字

  7. perceptron感知机 mtalab

    data=load('data.txt'); x=[data(:,1),data(:,2)]; y=data(:,3); k=length(y); %绘制散点图 for j=1:k if y(j)== ...

  8. Attempt to load Oracle client libraries threw BadImageFormatException. This problem will occur when running in 64 bit mode with the 32 bit Oracle client components installed.

    System.Data.OracleClient 已经过时了.微软不再支持它. 因此,我建议你为. NET 使用Oracle数据提供程序:ODP.Net. 你可以从以下位置下载: 版本:Release ...

  9. Chapter 3 Top 10 List

    3.1 Introduction Given a set of (key-as-string, value-as-integer) pairs, then finding a Top-N ( wher ...

  10. Python正则表达式(总)

    转载请标明出处: http://www.cnblogs.com/why168888/p/6445044.html 本文出自:[Edwin博客园] Python正则表达式(总) search(patte ...