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圖: