學習 CSS 之用 CSS 3D 實現炫酷效果

把大象關進冰箱需要幾步？三步，把冰箱門開啟，把大象關進去，把冰箱門關上。

用 css 實現 3d 效果需幾步？三步，設定透視效果 perspective，改變元素載體為 preserve-3d，對元素進行 3d 轉換操作。

perspective 屬性決定了我們從什麼地方檢視元素，定義時的 perspective 屬性，它是乙個元素的子元素，透檢視，而不是元素本身。

再說 3d 轉換操作，需要用到的就是 translatex，translatey，translatez，寫到一塊就是 translate-3d，除此之外還有 rotatex，rotatey，rotatez。至於平移和旋轉的方向，可以參考下面的三維座標圖：

1.建立透視背景

首先是要建立乙個透視背景，也就是乙個具有 perspective 屬性的 div，這裡我給 perspective 的值為800個畫素單位。除此之外，還要有乙個 div，將所有頁面都包括在這個 div 中，這個 div 需要設定 position 為 relative，因為後面的頁面都要使用絕對定位，並且要設定 transform-style 屬性為 preserve-3d。相關 css **如下：

1

.back 78
.content 

在 css 類為 content 的 div 中建立多個頁面，將除了第一頁以外的頁面全都「放倒」，即以底邊為變換中心，然後在 x 方向上旋轉90度，css **如下：

transform-origin: bottom;

transform: rotatex(90deg);

1

.page 
1213
#p1 
1718
#p2,
19#p3,
20#p4,
21#p5,
22#p6 

1

1.建立正方體

用 css 建立乙個旋轉的正方體，首先也是要建立乙個透視的背景，然後建立六個頁面，分別進行平移和旋轉操作，構造出乙個正方體，css **如下：

1

.face 910
#f1 
1314
#f2 
1920
#f3 
2526
#f4 
3132
#f5 
3738
#f6 

1

學習 CSS 之用 CSS 3D 實現炫酷效果

把大象關進冰箱需要幾步？三步，把冰箱門開啟，把大象關進去，把冰箱門關上。用 css 實現 3d 效果需幾步？三步，設定透視效果 perspective，改變元素載體為 preserve 3d，對元素進行 3d 轉換操作。perspective 屬性決定了我們從什麼地方檢視元素，定義時的 perspe...

css 3d 動畫 相關

transform style preserve 3d 設定3d模式perspective 700px 屬性定義 3d 元素距檢視的距離，以畫素計。該屬性允許您改變 3d 元素檢視 3d 元素的檢視。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身perspect...

CSS3D之實現動態字

思路 用 befor偽元素生成用於3d翻轉的字型 實現起來挺簡單的 新建5個div，每個div分別對應5個字型 用 befor生成用於翻轉的字型，並用absolute，以及z index控制生成字型的位置 當元素被 hover時，就進行3d翻轉 實現起來挺簡單的，下面直接上原始碼 前端小 學生上面也...