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 平移和旋轉等方法就可以實現。...