<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>

     <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>