通過CSS3實現旋轉立方體的方法

這篇文章將為大家詳細講解有關通過CSS3實現旋轉立方體的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

主要通過CSS3中transform屬性實現，首先給元素設置成3D元素，然后定義六個面的樣式再通過transform屬性對其進行旋轉即可實現旋轉立方體效果

如今隨著CSS3的不斷成熟和發展，我們可以利用CSS3變換樣式，translateZ，rotateX，rotateY，rotateZ，徑向漸變，線性漸變，透視等屬性創建一個可以旋轉的3D立方體。

【推薦課程：CSS3教程】

在立方體內部是六個側面，它們被定義為單獨的圖形元素，每個元素具有單獨的“后”，“頂”，“底”，“左”，“右”和“前”。所以首先我們要創建html代碼。包含這六個元素。如下代碼所示

<div class="box">
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
		<div class="four"></div>
		<div class="five"></div>
		<div class="six"></div>
	</div>

然后設置box的CSS屬性，以及將它設置為3D元素。在這里需要注意要設置定位，目的是讓六個元素可疊加在一起

.box{
        position: relative;
        width:200px;
         height:200px;
         transform-style: preserve-3d;/*創造3D空間*/
       -webkit-transform-style: preserve-3d;
        transition: all 5s linear;
	}

接下來就要設置立方體的六個面

.box div{
	width:200px;
	height: 200px;
	position: absolute;
	left: 0;
       top: 0;
       transform-style: preserve-3d;
       -webkit-transform-style: preserve-3d;
       border: 1px solid #46B8DA;
       opacity: 0.5;
	}

六個面的公共部分設置完了，接下來就要設置這六個面的3d效果，我們可以通過transform 屬性來設置3D變化，它可以允許我們對元素進行旋轉，移動，傾斜等

           .one{
                transform: rotateY(0deg) translateZ(100px);
                background-color:rgb(255,118,19);
            }
            .two{
                transform: rotateY(180deg) translateZ(100px);
                 background-color:rgb(231,78,72);
            }
            .three{
                transform: rotateX(90deg) translateZ(100px);
                 background-color: rgb(75,165,165);
            }
            .four{
                transform: rotateX(-90deg) translateZ(100px);
                 background-color:rgb(129,182,62);
            }
            .five{
                transform: rotateY(90deg) translateZ(100px);
                background-color: rgb(255,118,19);
            }
            .six{
                transform: rotateY(-90deg) translateZ(100px);
                 background-color:rgb(244,208,114);
            }

這樣我們的立方體就做好了，當鼠標移上去的時候就會發生旋轉

.box:hover{
                transform: rotateX(360deg) rotateY(360deg);
                -webkit-transform: rotateX(360deg) rotateY(360deg);
            }

效果圖：

關于通過CSS3實現旋轉立方體的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。