用css實現3D立方體旋轉特效 - qishuang－IT工程師數位筆記本

文章出處

先來看運行后出來的效果

它是在不停運行的一個立方體

先來看html部分的代碼

<div class="rect-wrap">   <!--舞臺元素，設置perspective，讓其子元素獲得透視效果。-->
    <div class="container">   <!-- 容器，設置transform-style: preserve-3d，讓其子元素在3D空間呈現-->
        <div class="top slide"></div>   <!--立方體的六個面-->
        <div class="bottom slide"></div>
        <div class="left slide"></div>
        <div class="right slide"></div>
        <div class="front slide"></div>
        <div class="back slide"></div>
    </div>
</div>

先建出來六個div然后再依次給它們設置樣式

再來看它們的樣式表

<style type="text/css">
.rect-wrap {
    position: relative;
    perspective: 1600px;
}
.container {
    width: 800px;
    height: 800px;
    transform-style: preserve-3d;
    transform-origin: 50% 50% 200px;    /*設置3d空間的原點在平面中心再向Z軸移動200px的位置*/
}
.slide {
    width: 400px;
    height: 400px;
    position: absolute;  //定位
}
.top {
    left: 200px;
    top: -200px;
    transform: rotateX(-90deg);
    transform-origin: bottom;
    background-color:#C69
}
.bottom {
    left: 200px;
    bottom: -200px;
    transform: rotateX(90deg);
    transform-origin: top;
    background-color:#6FF
}
.left {
    left: -200px;
    top: 200px;
    transform: rotateY(90deg);
    transform-origin: right;
    background-color:#9F0
}
.right {
    left: 600px;
    top: 200px;
    transform: rotateY(-90deg);
    transform-origin: left;
    background-color:#33F
}
.front {
    left: 200px;
    top: 200px;
    transform: translateZ(400px);
    background-color:#366  /*立方體前面正對著屏幕，所以不用旋轉，只需向Z軸前移動距離*/
     
}
.back {
    left: 200px;
    top: 200px;
    transform: translateZ(0);
    background-color:#09F   /*立方體后面正對著屏幕，所以不用旋轉，只需向Z軸后移動距離*/
}
@keyframes rotate-frame {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(0deg) rotateY(180deg);
    }
    20% {
        transform: rotateX(-180deg) rotateY(180deg);
    }
    30% {
        transform: rotateX(-360deg) rotateY(180deg);
    }
    40% {
        transform: rotateX(-360deg) rotateY(360deg);
    }
    50% {
        transform: rotateX(-180deg) rotateY(360deg);
    }
    60% {
        transform: rotateX(90deg) rotateY(180deg);
    }
    70% {
        transform: rotateX(0) rotateY(180deg);
    }
    80% {
        transform: rotateX(90deg) rotateY(90deg);
    }
    90% {
        transform: rotateX(90deg) rotateY(0);
    }
    100% {
        transform: rotateX(0) rotateY(0);
    }
}
.container{
    animation: rotate-frame 30s linear infinite;
}



</style>