3D变换

2017-09-13

在css3中我们学习了一些跟动画有关的一些属性，除了之前所学到的animation和2D动画,今天又说到了真正可以写炫酷效果的3D动画。相关属性如下:

transform:translate | rotate | scale;

1.跟之前2D动画不同的是，3D动画少了skew倾斜，而且多了三维立体效果，即多了一个Z轴。
2.在设置立体动画时，别忘了给父级设置perspective:景深距离;
3.给立体盒子设置transform-style:perspective-3d;
4.注意的就是对一个元素进行3D转换的时候，注意它的坐标轴也会发生相应地改变方向。

1
2
3
4
5
@requires_authorization
transform:translate(100px);
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px);

只设置一个值的时候，只在x轴上进行平移相应的距离。

1
2
3
4
@requires_authorization
transform:rotateZ(30deg);
transform:rotateX(30deg);
transform:rotateY(30deg);

不指明是哪个轴上进行旋转，就默认是在Z轴上进行旋转。

1
2
3
4
5
@requires_authorization
transform:scale(2);
transform:scaleX(2);
transform:scaleY(2);
transform:scaleZ(2);

第一种情况就是在x轴和y轴上都缩放2倍。

旋转魔方代码:　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
@requires_authorization
	<style>
		*{
			margin: 0;
		}
		body,html{
			height: 100vh;
			perspective: 3000px;
		}
		.wrap{
			width: 100px;
			height: 100px;
			border: 1px solid red;
			margin: 100px auto;
			position: relative;
			transform-style: preserve-3d;
			transition: all 10s;
		}
		.wrap:hover{
			transform: rotateY(3600deg);
		}
		.wrap div{
			width: 100px;
			height: 100px;
			background: lightcyan;
			text-align: center;
			line-height: 100px;
			font-size: 20px;
			color: gray;
			position: absolute;
			top: 0;
			left: 0;
		}
		.box1{
			transform: translateZ(50px);
		}
		.box2{
			transform: translateZ(-50px);
		}
		.box3{
			transform: rotateX(90deg) translateZ(50px);
		}
		.box4{
			transform: rotateX(90deg) translateZ(-50px);
		}
		.box5{
			transform: rotateY(90deg) translateZ(50px);
		}
		.box6{
			transform: rotateY(90deg) translateZ(-50px);
		}
	</style>
	<body>
		<div class="wrap">
			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>
			<div class="box4">4</div>
			<div class="box5">5</div>
			<div class="box6">6</div>
		</div>
	</body>

圆形开阔旋转代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
@requires_authorization
	<style>
		*{
			margin: 0;
		}
		html,body{
			height: 100vh;
			perspective: 3000px;
		}
		.wrap{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			margin: 100px auto;
			transform-style: preserve-3d;
			position: relative;
			transition: all 10s;
		}
		.wrap:hover{
			transform: rotateY(360deg);
		}
		.wrap div{
			width: 200px;
			height: 200px;
			background: lightcyan;
			position: absolute;
			top: 0;
			left: 0;
		}
		.box1{
			transform: translateZ(400px);
		}
		.box2{
			transform: translateZ(-400px);
		}
		.box3{
			transform: rotateY(30deg) translateZ(400px);
		}
		.box4{
			transform: rotateY(30deg) translateZ(-400px);
		}
		.box5{
			transform: rotateY(60deg) translateZ(400px);
		}
		.box6{
			transform: rotateY(60deg) translateZ(-400px);
		}
		.box7{
			transform: rotateY(90deg) translateZ(400px);
		}
		.box8{
			transform: rotateY(90deg) translateZ(-400px);
		}
		.box9{
			transform: rotateY(120deg) translateZ(400px);
		}
		.box10{
			transform: rotateY(120deg) translateZ(-400px);
		}
		.box11{
			transform: rotateY(150deg) translateZ(400px);
		}
		.box12{
			transform: rotateY(150deg) translateZ(-400px);
		}
	</style>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
			<div class="box5"></div>
			<div class="box6"></div>
			<div class="box7"></div>
			<div class="box8"></div>
			<div class="box9"></div>
			<div class="box10"></div>
			<div class="box11"></div>
			<div class="box12"></div>
		</div>
	</body>

这个开阔旋转就是元素进行旋转之后它的坐标轴方向变化。

螺旋旋转代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
@requires_authorization
	<style>
		*{
			margin: 0;
		}
		html,body{
			height: 100vh;
			perspective: 3000px;
		}
		.wrap{
			width: 50px;
			height: 50px;
			margin: 100px auto;
			border: 1px solid red;
			position: relative;
			transform-style: preserve-3d;
			transition: all 10s;
		}
		.wrap:hover{
			transform: rotateY(3600deg);
		}
		.wrap div{
			width: 50px;
			height: 50px;
			background: lightblue;
			position: absolute;
			top: 0;
			left: 0;
		}
		.box1{
			transform: translateY(-20px) translateZ(300px);
		}
		.box13{
			transform: translateY(-260px) translateZ(300px);
		}
		.box25{
			transform: translateY(220px) translateZ(300px);
		}
		.box2{
			transform: rotateY(30deg) translateY(0px) translateZ(300px);
		}
		.box14{
			transform: rotateY(30deg) translateY(-240px) translateZ(300px);
		}
		.box26{
			transform: rotateY(30deg) translateY(240px) translateZ(300px);
		}
		.box3{
			transform: rotateY(60deg) translateY(20px) translateZ(300px);
		}
		.box15{
			transform: rotateY(60deg) translateY(-220px) translateZ(300px);
		}
		.box27{
			transform: rotateY(60deg) translateY(260px) translateZ(300px);
		}
		.box4{
			transform: rotateY(90deg) translateY(40px) translateZ(300px);
		}
		.box16{
			transform: rotateY(90deg) translateY(-200px) translateZ(300px);
		}
		.box28{
			transform: rotateY(90deg) translateY(280px) translateZ(300px);
		}
		.box5{
			transform: rotateY(120deg) translateY(60px) translateZ(300px);
		}
		.box17{
			transform: rotateY(120deg) translateY(-180px) translateZ(300px);
		}
		.box29{
			transform: rotateY(120deg) translateY(300px) translateZ(300px);
		}
		.box6{
			transform: rotateY(150deg) translateY(80px) translateZ(300px);
		}
		.box18{
			transform: rotateY(150deg) translateY(-160px) translateZ(300px);
		}
		.box30{
			transform: rotateY(150deg) translateY(320px) translateZ(300px);
		}
		.box7{
			transform: rotateY(180deg) translateY(100px) translateZ(300px);
		}
		.box19{
			transform: rotateY(180deg) translateY(-140px) translateZ(300px);
		}
		.box31{
			transform: rotateY(180deg) translateY(340px) translateZ(300px);
		}
		.box8{
			transform: rotateY(210deg) translateY(120px) translateZ(300px);
		}
		.box20{
			transform: rotateY(210deg) translateY(-120px) translateZ(300px);
		}
		.box32{
			transform: rotateY(210deg) translateY(360px) translateZ(300px);
		}
		.box9{
			transform: rotateY(240deg) translateY(140px) translateZ(300px);
		}
		.box21{
			transform: rotateY(240deg) translateY(-100px) translateZ(300px);
		}
		.box33{
			transform: rotateY(240deg) translateY(380px) translateZ(300px);
		}
		.box10{
			transform: rotateY(270deg) translateY(160px) translateZ(300px);
		}
		.box22{
			transform: rotateY(270deg) translateY(-80px) translateZ(300px);
		}
		.box34{
			transform: rotateY(270deg) translateY(400px) translateZ(300px);
		}
		.box11{
			transform: rotateY(300deg) translateY(180px) translateZ(300px);
		}
		.box23{
			transform: rotateY(300deg) translateY(-60px) translateZ(300px);
		}
		.box35{
			transform: rotateY(300deg) translateY(420px) translateZ(300px);
		}
		.box12{
			transform: rotateY(330deg) translateY(200px) translateZ(300px);
		}
		.box24{
			transform: rotateY(330deg) translateY(-40px) translateZ(300px);
		}
		.box36{
			transform: rotateY(330deg) translateY(440px) translateZ(300px);
		}
	</style>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
			<div class="box5"></div>
			<div class="box6"></div>
			<div class="box7"></div>
			<div class="box8"></div>
			<div class="box9"></div>
			<div class="box10"></div>
			<div class="box11"></div>
			<div class="box12"></div>
			<div class="box13"></div>
			<div class="box14"></div>
			<div class="box15"></div>
			<div class="box16"></div>
			<div class="box17"></div>
			<div class="box18"></div>
			<div class="box19"></div>
			<div class="box20"></div>
			<div class="box21"></div>
			<div class="box22"></div>
			<div class="box23"></div>
			<div class="box24"></div>
			<div class="box25"></div>
			<div class="box26"></div>
			<div class="box27"></div>
			<div class="box28"></div>
			<div class="box29"></div>
			<div class="box30"></div>
			<div class="box31"></div>
			<div class="box32"></div>
			<div class="box33"></div>
			<div class="box34"></div>
			<div class="box35"></div>
			<div class="box36"></div>
		</div>
	</body>