css3 transform 2d

clipboard.png
以上是2d屬性
其餘的均爲3d屬性,設置了這些屬性變具有了z座標上的圖形。
例如:rotateX()這個屬性設置以後,當前元素就會具有z座標,若是不設置假視角,是沒法看出3d效果的,必須是指perspective屬性以後纔會,看出3d的效果。若是3d元素中含有3d元素,則必須使用transform-style: preserve-3d;屬性才能看出來3d效果,spa

clipboard.png

包括2d元素也同樣的。
哪一個元素上有3d元素,perspective設置了以後就能看到其3d效果。若是3d元素是在另外一個3d元素上面的,若是不設置transform-style: preserve-3d,也是無效的。3d

clipboard.png

perspective: 150px;
perspective-origin: 10% 10%;
perspective-origin屬性orm

clipboard.png

相關文章
相關標籤/搜索