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 转换元素的透视视图

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

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Document</title>
  7     <style>
  8         * {
  9             margin: 0;
 10             padding: 0;
 11         }
 12         
 13         .container {
 14             width: 200px;
 15             height: 200px;
 16             margin: 200px auto;
 17             border: 1px solid black;
 18             perspective: 800px;
 19             transform-origin: center center;
 20         }
 21         
 22         #divE {
 23             width: 200px;
 24             height: 200px;
 25             position: relative;
 26             transform-style: preserve-3d;
 27             transform-origin: center center -50px;
 28         }
 29         
 30         #divE figure {
 31             width: 200px;
 32             height: 200px;
 33             left: 0;
 34             top: 0;
 35             /*display: block;*/
 36             position: absolute;
 37             transform-origin: center center;
 38         }
 39         
 40         .front {
 41             transform: rotateY( 0deg) translateZ( 100px);
 42             background: red;
 43             opacity: 0.5;
 44         }
 45         
 46         .back {
 47             transform: rotateY( 180deg) translateZ( 100px);
 48             background: blue;
 49             opacity: 0.5;
 50         }
 51         
 52         .right {
 53             transform: rotateY( 90deg) translateZ( 100px);
 54             background: gold;
 55             opacity: 0.5;
 56         }
 57         
 58         .left {
 59             transform: rotateY( -90deg) translateZ( 100px);
 60             background: green;
 61             opacity: 0.5;
 62         }
 63         
 64         .top {
 65             transform: rotateX( 90deg) translateZ( 100px);
 66             background: lightblue;
 67             opacity: 0.5;
 68         }
 69         
 70         .bottom {
 71             transform: rotateX( -90deg) translateZ( 100px);
 72             background: indigo;
 73             opacity: 0.5;
 74         }
 75         
 76         .myfirst {
 77             /*定义动画插件名变*/
 78             animation-name: myfirst;
 79             /*定义动画完成一个周期需要的时间*/
 80             animation-duration: 2s;
 81             /*定义动画开始的时间*/
 82             animation-delay: 1s;
 83             /*定义动画的速度曲线,这是定义为匀速*/
 84             animation-timing-function: linear;
 85             /*定义动画播放的次数,这里定义为重复*/
 86             animation-iteration-count: infinite;
 87             /*定义下一周期是否逆向,这里定义为逆向*/
 88             animation-direction: alternate;
 89             /*定义动画是否暂停播放,这里定义为播放*/
 90             animation-play-state: running;
 91         }
 92         
 93         @keyframes myfirst {
 94             0% {
 95                 transform: rotate3d(0, 1, 0, 0deg);
 96                 /*transform: rotate3d(1, 0, 0, 0deg);*/
 97                 transform-origin: center center;
 98             }
 99             100% {
100                 transform: rotate3d(0, 1, 0, 360deg);
101                 /*transform: rotate3d(1, 0, 0, 180deg);*/
102                 transform-origin: center center;
103             }
104         }
105     </style>
106 </head>
107 
108 <body>
109     <div class="container">
110         <div id="divE">
111             <figure class="front">1</figure>
112             <figure class="back">2</figure>
113             <figure class="right">3</figure>
114             <figure class="left">4</figure>
115             <figure class="top">5</figure>
116             <figure class="bottom">6</figure>
117         </div>
118     </div>
119 </body>
120 <script>
121     var a = document.getElementById("divE");
122     // alert(a);
123     a.onclick = function() {
124         a.className = "myfirst";
125     }
126     a.onmouseleave = function() {
127         a.className = a.className.replace("myfirst", " ");
128     }
129 </script>
130 
131 </html>

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

 

posted @ 2016-12-15 15:52  rookieM  阅读(586)  评论(0)  编辑  收藏  举报