如何透過CSS3實現旋轉立方體

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

如今隨著CSS3的不斷成熟和發展，我們可以利用CSS3變換樣式，translateZ，rotateX，rotateY，rotateZ，徑向漸變，線性漸變，透視等屬性創建一個可以旋轉的3D立方體。接下來在文章中將為大家具體介紹如何透過CSS3來實現這個旋轉立方體效果。具有一定參考價值，希望對大家有幫助

【推薦課程：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實現旋轉立方體###

以上是如何透過CSS3實現旋轉立方體的詳細內容。更多資訊請關注PHP中文網其他相關文章！