transform 過渡屬性 向元素進行2D或3D轉換

transform-origin：該元素基于某個點來旋轉?

transform-style: preserve-3d 規定嵌套元素如何在3D空間顯示；

perspective?:perspective 屬性只影響 3D 轉換元素,多少像素的3D元素是從視圖的perspective屬性定義

backface-visibility:屬性定義當元素不面向屏幕時是否可見;

2D:對元素移動、縮放、拉伸、拉長和轉動；

3D:在三維空間操作，可以改變元素尺寸、形狀和位置；

?

2D方法：

?

?

1.translate(x,y) 2D轉換，沿著X軸和Y軸平行移動元素

2.translateX(n)?2D轉換，沿著X軸平行移動元素

3..translateY(n)?2D轉換，沿著Y軸平行移動元素

4.scale(x,y)?2D轉縮放轉換，改變元素的寬度和高度

5.scaleX(n)?2D轉縮放轉換，改變元素的寬度

6.scaleY(n)?2D轉縮放轉換，改變元素的高度

7.rotate(angel) 2D旋轉，規定任意角度

8.skew(x-angel,y-angel) 2D傾斜轉換，沿著X軸和Y軸

9.skewX()?2D傾斜轉換，沿著X軸

10.skewY()?2D傾斜轉換，沿著Y軸

3D方法：

1.translate(x,y,z) 3D轉換，沿著X軸和Y軸Z軸轉換

2.translateX(n)?3D轉換，沿著X軸轉換

3..translateY(n)?3D轉換，沿著Y軸轉換

4..translateZ(n)?3D轉換，沿著Z軸轉換

5.scale(x,y)?3D轉縮放轉換

6.scaleX(n)?3D轉縮放轉換，給定X軸的值

7.scaleY(n)?3D轉縮放轉換，給定Y軸的值

8.scaleZ(n)?3D轉縮放轉換，給定Z軸的值

9.rotate(angel) 3D旋轉，規定任意角度

10.rotateX(angel)沿著X軸3D旋轉

11.rotateY(angel) 沿著Y軸3D旋轉

12.rotateZ(angel) 沿著Z軸3D旋轉

?

?

?

?

瀏覽器支持：

2D：

IE10,Firefox,Opera支持，Chrome和Safari需要前綴-webkit-,IE9需要前綴-ms.

3D:

IE10,Firefox，Chrome和Safari需要前綴-webkit-,Opera不支持。

區別：

3D除了增添了少許2D沒有的屬性外，其他基本上是細化了2D的屬性。

轉載于:https://www.cnblogs.com/qinlinkun/p/10554637.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的CSS3--2D3D的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。