CSS3實現旋轉立方體

輕松實現帶圖片旋轉立方體盒子

需要使用 transform，@keyframes， animation這三個重要的屬性

1. 實現基本的布局，讓父盒子成為3D的舞台，讓父盒子X,Y軸各轉20deg方便我們觀察

   <div class="parbox">
           <div class="son before"></div>
           <div class="son after"></div>
           <div class="son left"></div>
           <div class="son right"></div>
           <div class="son top"></div>
           <div class="son bottom"></div>
     </div>

    <style>
           * {
               margin: 0;
               padding: 0;
           }
           .parbox {
               width: 300px;
               height: 300px;
               position: fixed;
               left: 0;right: 0;
               top: 0;bottom: 0;
               margin: auto;
               background-color: purple;
               transform-style: preserve-3d;
               transform: rotateX(20deg) rotateY(20deg);
           }
           .son {
               width: 300px;
               height: 300px;
               position: absolute;
               left: 0;top: 0;
               background-color:yellow;
           }
       </style>

2. 利用transform實現立方體的六個面

   1. 正面

      .before {
                  transform:translateZ(150px);
              }

   2. 背面

       .after {
                  transform:translateZ(-150px) rotateY(180deg);
              }

   3. 上面

       .top{
                  transform: translateY(-150px) rotateX(90deg);
              }

   4. 下面

       .bottom {
                  transform: translateY(150px) rotateX(-90deg);
              }

   5. 左面

      .left {
                  transform: translateX(-150px) rotateY(-90deg);
              }

   6. 右面

      .right {
                  transform: translateX(150px) rotateY(90deg);
              }

3. @keyframes指定關鍵幀

    @keyframes Rotate {
               0% {
                   transform:rotateY(0deg) rotateX(0deg); 
               } 
               25% {
                   transform:rotateY(90deg) rotateX(90deg); 
               } 
               50% {
                   transform: rotatey(180deg) rotateX(0deg);
               }
               75% {
                   transform:rotateY(270deg) rotateX(-90deg); 
               }
               100% {
                   transform: rotateY(360deg) rotateX(0deg);
               }
           } 

4. animation引用關鍵幀

    .parbox{
            animation: Rotate 10s infinite linear;
           }

5. 往六個面添加圖片

   <div class="parbox">
           <div class="son before"><img src="./images/x.jpg" alt=""></div>
           <div class="son after"><img src="./images/x.jpg" alt=""></div>
           <div class="son left"><img src="./images/x.jpg" alt=""></div>
           <div class="son right"><img src="./images/x.jpg" alt=""></div>
           <div class="son top"><img src="./images/x.jpg" alt=""></div>
           <div class="son bottom"><img src="./images/x.jpg" alt=""></div>
       </div>

    .son img {
   ​
        display: block;
   ​
        width: 100%;
   ​
        height: 100%;
   ​
      }

   這樣一個帶圖片旋轉的立方體盒子就實現了

6. 我們還可以增加鼠標移入停止旋轉

   .parbox:hover {
               animation-play-state: paused;
           }

    

7. 鼠標移入圖片放大效果

   .before img:hover {
                           transform: scale(1.5);
                      }

   效果圖

　　css樣式

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .parbox {
            width: 300px;
            height: 300px;
            position: fixed;
            left: 0;right: 0;
            top: 0;bottom: 0;
            margin: auto;
            transform-style: preserve-3d;
            /* transform: rotateX(20deg) rotateY(20deg); */
            animation: Rotate 10s infinite linear;
        }
        .parbox:hover {
            animation-play-state: paused;
        }
        .son {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;top: 0;
        }
        .son img {
            display: block;
            width: 100%;
            height: 100%;
            transition: 1s;
        }
        .before {
            transform:translateZ(150px);
         
        }
        .after {
         
            transform:translateZ(-150px) rotateY(180deg);
        }
        .top {
         
            transform: translateY(-150px) rotateX(90deg);
        }
        .bottom {
         
            transform: translateY(150px) rotateX(-90deg);
        }
        .left {
         
            transform: translateX(-150px) rotateY(-90deg);
        }
        .right {
         
            transform: translateX(150px) rotateY(90deg);
        }
        .after img:hover {
            transform: scale(1.5);
        }
        .before img:hover {
            transform: scale(1.5);
        }
        .left img:hover {
            transform: scale(1.5);
        }
        .right img:hover {
            transform: scale(1.5);
        }
        .top img:hover {
            transform: scale(1.5);
        }
        .bottom img:hover {
            transform: scale(1.5);
        }
        @keyframes Rotate {
            0% {
                transform:rotateY(0deg) rotateX(0deg); 
            } 
            25% {
                transform:rotateY(90deg) rotateX(90deg); 
            } 
            50% {
                transform: rotatey(180deg) rotateX(0deg);
            }
            75% {
                transform:rotateY(270deg) rotateX(-90deg); 
            }
            100% {
                transform: rotateY(360deg) rotateX(0deg);
            }
        } 
    </style>