使用纯css鼠标移入效果,炫酷的旋转正方体

首先我们需要创建几个盒子

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

然后我们在创建的CSS文件夹中写入css

         *{
                padding: 0;
                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>