先來看運行后出來的效果

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

先來看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>

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

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

在每個div里都加上圖片，然后給每個圖片設置成統一名字，再給他們統一樣式，設置高和寬就好了

可以粘貼復制代碼，都來試試吧

總結

以上是生活随笔為你收集整理的css实现3D立方体旋转特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。