1.制作一个立方体：首先要有6个面
1 <div class="box"> 2 <div class="front">front</div> 3 <div class="back">back</div> 4 <div class="left">left</div> 5 <div class="right">right</div> 6 <div class="top">top</div> 7 <div class="bottom">bottom</div> 8 </div>
2.具体代码展示在css中：集体描述展示在注释
1 <style>
2 *{
3 padding: 0;
4 margin: 0;
5 }
6 .box{
7 width: 200px;
8 height: 200px;
9 margin: 100px auto;
10 position: relative;
11 /*让box默认旋转，方便观察*/
12 transform: rotate3d(1,1,0,-30deg);
13 /*让子元素保留3d变换之后的效果*/
14 transform-style: preserve-3d;
15
16 /*添加透视景深效果*/
17 perspective: 0px;
18 /*设置透视的观察角度:第一个数值控制左右，第二个数值控制上下*/
19 perspective-origin: 0px 0px;
20 }
21 .box > div{
22 width: 200px;
23 height: 200px;
24 position: absolute;
25 opacity: 0.5;
26 }
27 /*因为立方体的边长是200px，所以正面往前移动100px，不需要其它改变*/
28 .front{
29 background-color: red;
30 transform: translateZ(100px);
31 }
32 /*因为立方体的边长是200px，所以背面往后移动100px，
33 而且显示图文的面是要冲后的，所以需要沿着y轴旋转180度*/
34 .back{
35 background-color: #77ff2b;
36 transform: translateZ(-100px) rotateY(180deg);
37 }
38 /*因为立方体的边长是200px，所以左面往左移动100px，
39 而且显示图文的面是要冲左的，所以需要沿着y轴旋转-90度*/
40 .left{
41 background-color: #47b3ff;
42 transform: translateX(-100px) rotateY(-90deg);
43 }
44 /*因为立方体的边长是200px，所以右面往右移动100px，
45 而且显示图文的面是要冲右的，所以需要沿着y轴旋转90度*/
46 .right{
47 background-color: #ff6fd9;
48 transform: translateX(100px) rotateY(90deg);
49 }
50 /*因为立方体的边长是200px，所以上面往上移动100px，
51 而且显示图文的面是要冲上的，所以需要沿着x轴旋转90度*/
52 .top{
53 background-color: #ff7319;
54 transform: translateY(-100px) rotateX(90deg);
55 }
56 /*因为立方体的边长是200px，所以背面往下移动100px，
57 而且显示图文的面是要冲下的，所以需要沿着x轴旋转-90度*/
58 .bottom{
59 background-color: #b33aff;
60 transform: translateY(100px) rotateX(-90deg);
61 }
62 </style>