CSS3之3D效果中的transform运用

css3中添加了很多新的标签

属性	描述	css
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

可以通过这些属性来对一个平面图形操作达到一个立体的效果

函数	描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵
translate3d(x,y,z)	定义 3D 转化
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值
scale3d(x,y,z)	定义 3D 缩放转换
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值
rotate3d(x,y,z,angle)	定义 3D 旋转
rotateX(angle)	定义沿 X 轴的 3D 旋转
rotateY(angle)	定义沿 Y 轴的 3D 旋转
rotateZ(angle)	定义沿 Z 轴的 3D 旋转
perspective(n)	定义 3D 转换元素的透视视图

红色的标签就是这次案例里面所用到的

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         * {
             margin: 0;
             padding: 0;
         }

         .container {
             width: 200px;
             height: 200px;
             margin: 200px auto;
             border: 1px solid black;
             perspective: 800px;
             transform-origin: center center;
         }

         #divE {
             width: 200px;
             height: 200px;
             position: relative;
             transform-style: preserve-3d;
             transform-origin: center center -50px;
         }

         #divE figure {
             width: 200px;
             height: 200px;
             left: 0;
             top: 0;
             /*display: block;*/
             position: absolute;
             transform-origin: center center;
         }

         .front {
             transform: rotateY( 0deg) translateZ( 100px);
             background: red;
             opacity: 0.5;
         }

         .back {
             transform: rotateY( 180deg) translateZ( 100px);
             background: blue;
             opacity: 0.5;
         }

         .right {
             transform: rotateY( 90deg) translateZ( 100px);
             background: gold;
             opacity: 0.5;
         }

         .left {
             transform: rotateY( -90deg) translateZ( 100px);
             background: green;
             opacity: 0.5;
         }

         .top {
             transform: rotateX( 90deg) translateZ( 100px);
             background: lightblue;
             opacity: 0.5;
         }

         .bottom {
             transform: rotateX( -90deg) translateZ( 100px);
             background: indigo;
             opacity: 0.5;
         }

         .myfirst {
             /*定义动画插件名变*/
             animation-name: myfirst;
             /*定义动画完成一个周期需要的时间*/
             animation-duration: 2s;
             /*定义动画开始的时间*/
             animation-delay: 1s;
             /*定义动画的速度曲线,这是定义为匀速*/
             animation-timing-function: linear;
             /*定义动画播放的次数,这里定义为重复*/
             animation-iteration-count: infinite;
             /*定义下一周期是否逆向,这里定义为逆向*/
             animation-direction: alternate;
             /*定义动画是否暂停播放,这里定义为播放*/
             animation-play-state: running;
         }

         @keyframes myfirst {
             0% {
                 transform: rotate3d(0, 1, 0, 0deg);
                 /*transform: rotate3d(1, 0, 0, 0deg);*/
                 transform-origin: center center;
             }
             100% {
                 transform: rotate3d(0, 1, 0, 360deg);
                 /*transform: rotate3d(1, 0, 0, 180deg);*/
                 transform-origin: center center;
             }
         }
     </style>
 </head>

 <body>
     <div class="container">
         <div id="divE">
             <figure class="front">1</figure>
             <figure class="back">2</figure>
             <figure class="right">3</figure>
             <figure class="left">4</figure>
             <figure class="top">5</figure>
             <figure class="bottom">6</figure>
         </div>
     </div>
 </body>
 <script>
     var a = document.getElementById("divE");
     // alert(a);
     a.onclick = function() {
         a.className = "myfirst";
     }
     a.onmouseleave = function() {
         a.className = a.className.replace("myfirst", " ");
     }
 </script>

 </html>

第一,先要有六个div前后,左右,上下;在六个div外面需要一个父级容器,在父级的外部需要一个