h5-立方体

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>

 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>