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%;
    ?
       }

    这样一个带图片旋转的立方体盒子就实现了CSS3实现旋转立方体

  6. 我们还可以增加鼠标移入停止旋转
    .parbox:hover {
                animation-play-state: paused;
            }
  7. 鼠标移入图片放大效果
    .before img:hover {
                            transform: scale(1.5);
                       }

    效果图CSS3实现旋转立方体

  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>