CSS3 3D 球體自轉特效

2021-10-09 08:31:04 字數 1471 閱讀 3712

transform-style: preserve-3d;設定父級元素,它的子級元素具有3d效果,再設定子元素沿y 軸的 3d 旋轉。

[注:線條看個人喜歡適當減少]

html**如下

css**如下:

html,

body

.box

.star

.starline

.starline:nth-child(1)

.starline:nth-child(2)

.starline:nth-child(3)

.starline:nth-child(4)

.starline:nth-child(5)

.starline:nth-child(6)

.starline:nth-child(7)

.starline:nth-child(8)

.starline:nth-child(9)

.starline:nth-child(10)

.starline:nth-child(11)

.starline:nth-child(12)

.starline:nth-child(13)

.starline:nth-child(14)

.starline:nth-child(15)

.starline:nth-child(16)

.starline:nth-child(17)

.starline:nth-child(18)

.starline:nth-child(19)

.starline:nth-child(20)

.starline:nth-child(21)

.starline:nth-child(22)

.starline:nth-child(23)

.starline:nth-child(24)

.starline:nth-child(25)

.starline:nth-child(26)

.starline:nth-child(27)

.starline:nth-child(28)

.starline:nth-child(29)

.starline:nth-child(30)

.starline:nth-child(31)

.starline:nth-child(32)

.starline:nth-child(33)

.starline:nth-child(34)

.starline:nth-child(35)

.starline:nth-child(36)

@keyframes starrotateto}

css3 3d特效彙總

dom結構 figure div span class face hover me span span class face button span div figure 原理 把兩個span弄成方塊,給figure繫結 hover hover 時 div 繞x旋轉 實現效果和 第乙個類似 僅僅是 ...

css3 3d特效彙總 0

dom結構 figure div span class face hover me span span class face button span div figure 原理 把兩個span弄成方塊,給figure繫結 hover hover 時 div 繞x旋轉 實現效果和 第乙個類似 僅僅是 ...

CSS3 3D轉換效果

css3 中是通過transform style樣式屬性來實現 3d 立體效果的,為父元素設定了該屬性其子元素就會具有 3d 效果,對應的屬性值如下 舉個例子 實現乙個正方體效果 主要是通過父元素的四條邊和前後面來構成正方體的六個面,再結合transform style 平移和旋轉等方法就可以實現。...