使用css製作乙個立方體，當滑鼠移入容器，讓它旋轉

2021-10-03 04:14:27 字數 1345 閱讀 8645

一、效果圖

二、思路：

要製作乙個立方體，首先要在乙個容器內蜘蛛出它的六個面，然後利用transform屬性的旋轉和位移操作，將六個面移動到前後左右上下的位置這樣就形成乙個立方體。

三、知識點：

perspective : 離螢幕多遠的距離去觀察元素，值越大幅度越小。

perspective-origin : 景深-基點位置，觀察元素的角度。(transform-origin : x y z)

transform-style : 3d空間 (flat預設值2d、preserve-3d 3d，產生乙個三維空間)

四、實現步驟：

1.先寫結構6個面



"box"


>


>


>


1li>


>


2li>


>


3li>


>


4li>


>


5li>


>


6li>


ul>


div>
2.css中清除去預設樣式

*


ul
3.為容器和盒子設立樣式，加入景深 perspective和transform-style : preserve-3d讓其有立體3d的效果

#box


#box ul


#box ul li
4.利用transform:rotatex()和transform:rotatey()讓2、3、4、5 這4個面旋轉到右左上下，其中使用transform-orign來改變旋轉的基點，利用transform:translatesz()第6面位移到後面，這樣立方體就形成了。

#box ul li:nth-of-type(1)


#box ul li:nth-of-type(2)


#box ul li:nth-of-type(3)


#box ul li:nth-of-type(4)


#box ul li:nth-of-type(5)


#box ul li:nth-of-type(6)
5.利用偽類hover實現當滑鼠移入的時候讓其旋轉360度

#box:hover ul
五、整體**

"box">

css製作乙個自動旋轉的立方體

1.透視 景深效果 左手法則 大拇指指向當前座標軸的下方向，手指環繞的方向就是正方向 perspective length 為乙個元素設定三維透視的距離。僅作用於元素的後代，而不是其元素本身。當perspective none 0 時，相當於沒有設perspective length 比如你要建立乙...

css3製作立方體

建立6個寬高為100px的正方形，調整ul在頁面的位置，分別設定不同li裡的背景色。為了方便區分，在li裡設定數字顯示 使用絕對定位的目的是為了讓6個li分別顯示在圍成正方體所需的位置上。屬性 transform style 設定3d空間 屬性值 flat 處在2d空間 preserve 3d 處在...

CSS3製作立方體

要用css3來製作乙個正方體，我們先來看正方體的結構，如圖 1.建立結構 正方體有六個面，我們可以先建立六個面，放在li裡。設定寬高，和背景色 方便區分 效果如圖 2.位移 接下來可以通過定位 position 和位移 translate 將他們移動到圖一的位置。先用絕對定位將六塊正方形定位到第1塊...