css3中添加了很多新的标签
可以通过这些属性来对一个平面图形操作达到一个立体的效果
| 函数 | 描述 |
| 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外面需要一个父级容器,在父级的外部需要一个
来源：https://www.cnblogs.com/WhiteM/p/6183580.html