css實現3D立方體旋轉特效的範例程式碼

這篇文章介紹css實現3D立方體旋轉特效的範例程式碼

先來看運行後出來的效果

它是在不停啟動並執行一個立方體

先來看html部分的代碼

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

先建出來六個p然後再依次給它們設定樣式

再來看它們的樣式表

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

代碼只有這些便可以實現3D旋轉了

也可以變成圖片的，可以這樣做

在每個p裡都加片，然後給每個圖片設定成統一名字，再給他們統一樣式，設定高和寬就好了

可以粘貼複製代碼，都來試試吧

相關文章：

簡單做出HTML5翻頁效果文字特效

CSS比較常用的翻轉特效

詳細介紹HTML5 3D衣服搖擺動畫特效如何?