transform-style設置3D效果


transform-style語法:

transform-style: flat | preserve-3d 

其中flat值爲默認值,表示所有子元素均在2D平面呈現,即使子元素沿着X軸或Y軸做了旋轉有了3D效果也不呈現出來。preserve-3d表示所有子元素的3D效果能呈現出來。


案例:
在這裏插入圖片描述
效果:
在這裏插入圖片描述
這段代碼裏,parent沒有設置transform-style屬性,即transform-style屬性值爲flat,即不呈現3D效果。現在我們來修改旋轉角度(看下面的gif圖),可以發現child始終在parent的上層旋轉,沒有3D效果。
在這裏插入圖片描述

現在給parent設置transform-style屬性,屬性值爲preserve-3d:
在這裏插入圖片描述
可以發現,子元素的3D效果呈現出來了:
在這裏插入圖片描述
最後我們還是來修改旋轉角度觀察下效果,見下方的gif圖:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章