h5-立方体
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>
