</div>

      <div class="wrap">

          <div class="cube">

            <div class="out-front"></div>

            <div class="out-back"></div>

            <div class="out-left"></div>

            <div class="out-right"></div>

            <div class="out-top"></div>

            <div class="out-bottom"></div>

          </div>

      </div>

         *{

                padding:;

                margin: 0 auto;

            }

            body{

                background: #222;

            }

            .warp{

                width: 200px;

                perspective: 1000px;  /*景深，某种意义上来讲你可以当中Z轴*/

                position: absolute;/*绝对定位*/

                left: 50%;

                top: 50%;

                transform: translateX(-50%) translateY(-50%); /*利用位移来处理水平垂直居中*/

            }

            .cube{

                width: 200px;

                height: 200px;

                position: relative;/*相对定位*/

                transform-style: preserve-3d;

                transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);/*旋转*/

                animation: move 6s infinite linear;     /*动画*/

            }

            @keyframes move{        /*时间帧*/

                0%{

                    transform: rotateX(0deg) rotateY(0deg);

                }

                100%{

                    transform: rotateX(360deg) rotateY(360deg);

                }

            }

            .cube >div{

                height: 100%;

                width: 100%;

                position: absolute;  /*绝对定位*/

                border-radius: 20px;

                background:#000;

                box-shadow: 0 0 10px currentcolor;/*currentcolor关键字的使用值是 color 属性值的计算值*/

                transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;/*过渡 属性 时间 过渡曲线*/

            }

            .cube:hover>div{

                background: currentcolor;

                box-shadow: 0 0 30px currentcolor;

            }

            .out-front{

                color: aqua;

                transform: translateZ(100px);/*转换 位移 */

            }

            .out-back{

                color:  chartreuse;

                transform: translateZ(-100px) rotateY(180deg);

            }

            .out-left{

                color: deeppink;

                transform: translateX(-100px) rotateY(-90deg);/*转换 位移 旋转*/

            }

            .out-right{

                color: gold;

                transform: translateX(100px) rotateY(90deg);/*转换 位移 旋转*/

            }

            .out-top{

                color: fuchsia;

                transform: translateY(-100px) rotateX(90deg);/*转换 位移 旋转*/

            }

            .out-bottom{

                color: orangered;

                transform: translateY(100px) rotateX(-90deg);/*转换 位移 旋转*/

            }

        </style>