使用純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>