純CSS實現3D正方體動畫效果

2021-10-09 23:47:15 字數 1751 閱讀 8671

目錄前言

正文1.基本架構

2.書寫每個div樣式

3.為需要產生動畫的一面單獨設定樣式

4.設定滑鼠hover效果

5.優化 總結

純css實現3d正方體動畫效果，此方法是通過transform的旋轉（rotate）和位移（translate）實現的，具體效果是滑鼠滑過時正方體的乙個面會產生位移

效果圖

先在body裡新增div作為參考，再在這個div裡新增六個div，分別代表正方體的六個面

前後左右上下


.cube 


.cube-3d 


.cube-3d div 


.front 


.rear 


.left 


.right 


.top 


.foot
效果：

可以先將cube-3d下的div設定透明度，方便觀察

其中核心的**時cube-3d裡的  transform-style: preserve-3d;

前後左右上下
在foot（正方體的底面）新增乙個類（foot-hover），單獨設定這個面的樣式

.foot-hover
效果：

我們要的效果就是滑鼠移上去底面往下移動一段距離，那麼在hover時只需設定translatey的值即可

**：

.cube:hover .foot-hover
效果：

這時我們會發現，正方體底部會出現鏤空的效果，不太好看，我們想要的是下圖的這種效果，其實實現很簡單

其實實現上圖那種效果並不是很麻煩，只需要再複製乙個底部div就行，再改一下顏色即可

**如下：

前後左


右上下下
由於行內樣式優先順序高於外部樣式，所以行內樣式會覆蓋外部樣式的背景顏色。

再將div為cube的盒子再複製四個，改一下cube的rotatex和rotatey的值即可，完整**如下：

前後


左右上下


下 前後


左右下上


下 前後


左右下上


下 前後


左右下上


下 下前


後左右上


下
以上就是今天小譚要分享的內容，小譚也只是剛剛入門的萌新，**寫的不是很規範，在給div命名時也很隨意，如果有什麼不足之處也請各位大佬手下留情，多多包涵，小譚也歡迎各位大佬指點一二，小譚不勝榮幸，感謝包容，感謝**，靴靴!

純CSS3製作正方體

css3 允許您使用 3d 轉換來對元素進行格式化。rotatex x軸旋轉，圍繞其在乙個給定度數x軸旋轉的元素。div rotatey y軸旋轉，圍繞其在乙個給定度數y軸旋轉的元素。div rotatez z軸旋轉，圍繞其在乙個給定度數z軸旋轉的元素。div 掌握好rotatex,rotatey,...

純css實現3D動畫

css動畫的某些屬性可以實現非常炫酷的3d效果，貼出乙個例子，可直接看到效果，用到了css的3d轉換和動畫。doctype html html head meta charset utf 8 meta name viewport content width device width,initial ...

純CSS實現3D立方體效果

c keyframes zhuanto a.b d.e f.g style class c class a 正面div class b 右面div class d 左面div class e 背面div class f 頂面div class g 底面div div 注意 要實現3d效果首先必須設定...