您的位置：首页 > Web前端 > CSS

CSS3之3D效果中的transform运用

2016-12-15 15:52 501 查看

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外面需要一个父级容器,在父级的外部需要一个

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航