1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5
6 <!-- 3D认知 -->
7 <style type="text/css">
8 /*
9 3D动画
10 CSS中的3D坐标: 右为X正方向 下为Y正方向 前为Z正方向
11 旋转方向: 左手拇指朝正方向握拳, 四指弯曲方向为旋转的正方向;
12 rotateX() 绕X轴旋转
13 rotateY() 绕Y轴旋转
14 rotateZ() 绕Z轴旋转
15 */
16 .box .rotateX img{
17 transition: all 3s;
18 }
19
20 .rotateX:hover img {
21 transform: rotateX(180deg);
22 }
23
24 /* 2. translate 移动
25 3. spective: 透视 只有设置了这个属性才能显示3D的效果
26 perspective在这里设置是box下的所有子标记都有这个属性
27 */
28 .box {
29 perspective: 1000px;
30 }
31
32 .box .translateX {
33 transition: all 3s;
34 }
35
36 .translateX {
37 width: 200px;
38 height: 200px;
39 background-color: red;
40 }
41 /*
42 translateX() 向右移动
43 translateY() 向下移动
44 translateZ() 向前移动
45 perspective在这里设置是只有.translateX都有这个属性
46 transform: perspective(1000px) translateZ(300px);
47 */
48 .translateX:hover{
49 transform: translateZ(300px);
50 }
51
52 </style>
53
54 <!-- 实例: 立方体 -->
55 <style type="text/css">
56
57 body {
58 margin: 0;
59 padding: 0;
60 background-color: #f7f7f7;
61 }
62
63 .cube {
64 width: 400px;
65 height: 400px;
66 margin: 100px auto;
67 /*perspective: 1000px;*/
68
69 /*以3D方式呈现*/
70 transform-style: preserve-3d;
71 transform: rotateX(-30deg) rotateY(30deg);
72
73 position: relative;
74 }
75
76 .front, .back, .left, .right, .top, .bottom {
77 width: 100%;
78 height: 100%;
79 line-height: 400px;
80 text-align: center;
81 font-size: 40px;
82 opacity: 0.5;
83
84 /*使用定位是为了使6个处于同一坐标系*/
85 position: absolute;
86 left: 0;
87 top: 0;
88 }
89
90 .left {
91 background-color: red;
92 transform: rotateY(90deg) translateZ(-200px);
93 }
94
95 .right {
96 background-color: orange;
97 transform: rotateY(90deg) translateZ(200px);
98 }
99
100 .back {
101 background-color: yellow;
102 transform: rotateY(0deg) translateZ(-200px);
103 }
104
105 .front {
106 background-color: green;
107 transform: rotateY(0deg) translateZ(200px);
108 }
109
110 .bottom {
111 background-color: blue;
112 transform: rotateX(90deg) translateZ(-200px);
113 }
114
115 .top {
116 background-color: purple;
117 transform: rotateX(90deg) translateZ(200px);
118 }
119
120 </style>
121
122
123 </head>
124 <body>
125
126 <!-- 3D认知 -->
127 <div class="box">
128 <div class="rotateX">
129 <img src="images/002.jpg">
130 </div>
131
132 <div class="translateX"></div>
133 </div>
134
135 <!-- 立方体 -->
136 <div class="cube">
137 <div class="front">front</div>
138 <div class="back">back</div>
139 <div class="left">left</div>
140 <div class="right">right</div>
141 <div class="top">top</div>
142 <div class="bottom">bottom</div>
143 </div>
144
145 </body>
146 </html>
