h5-立方体

1.制作一个立方体：首先要有6个面

 <div class="box">
     <div class="front">front</div>
     <div class="back">back</div>
     <div class="left">left</div>
     <div class="right">right</div>
     <div class="top">top</div>
     <div class="bottom">bottom</div>
 </div>

2.具体代码展示在css中：集体描述展示在注释

     <style>
         *{
             padding:;
             margin:;
         }
         .box{
             width: 200px;
             height: 200px;
             margin: 100px auto;
             position: relative;
             /*让box默认旋转，方便观察*/
             transform: rotate3d(1,1,0,-30deg);
             /*让子元素保留3d变换之后的效果*/
             transform-style: preserve-3d;

             /*添加透视景深效果*/
             perspective: 0px;
             /*设置透视的观察角度:第一个数值控制左右，第二个数值控制上下*/
             perspective-origin: 0px 0px;
         }
         .box > div{
             width: 200px;
             height: 200px;
             position: absolute;
             opacity: 0.5;
         }
         /*因为立方体的边长是200px，所以正面往前移动100px，不需要其它改变*/
         .front{
             background-color: red;
             transform: translateZ(100px);
         }
         /*因为立方体的边长是200px，所以背面往后移动100px，
         而且显示图文的面是要冲后的，所以需要沿着y轴旋转180度*/
         .back{
             background-color: #77ff2b;
             transform: translateZ(-100px) rotateY(180deg);
         }
         /*因为立方体的边长是200px，所以左面往左移动100px，
         而且显示图文的面是要冲左的，所以需要沿着y轴旋转-90度*/
         .left{
             background-color: #47b3ff;
             transform: translateX(-100px) rotateY(-90deg);
         }
         /*因为立方体的边长是200px，所以右面往右移动100px，
         而且显示图文的面是要冲右的，所以需要沿着y轴旋转90度*/
         .right{
             background-color: #ff6fd9;
             transform: translateX(100px) rotateY(90deg);
         }
         /*因为立方体的边长是200px，所以上面往上移动100px，
         而且显示图文的面是要冲上的，所以需要沿着x轴旋转90度*/
         .top{
             background-color: #ff7319;
             transform: translateY(-100px) rotateX(90deg);
         }
         /*因为立方体的边长是200px，所以背面往下移动100px，
         而且显示图文的面是要冲下的，所以需要沿着x轴旋转-90度*/
         .bottom{
             background-color: #b33aff;
             transform: translateY(100px) rotateX(-90deg);
         }
     </style>