css2D 和 3D的属性效果

CSS 3D 转换方法

通过 CSS transform 属性，您可以使用以下 3D 转换方法：

• rotateX()
• rotateY()
• rotateZ()

rotateX() 方法使元素绕其 X 轴旋转给定角度

rotateY() 方法使元素绕其 Y 轴旋转给定角度：

rotateZ() 方法使元素绕其 Z 轴旋转给定角度：

CSS 转换属性

下表列出了所有 3D 变换属性：

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

CSS 2D 转换

CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。

CSS 2D 转换方法

通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。使用负值将逆时针旋转元素。

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

scaleX() 方法增加或减少元素的宽度。

scaleY() 方法增加或减少元素的高度。

skewX() 方法使元素沿 X 轴倾斜给定角度。

skewY() 方法使元素沿 Y 轴倾斜给定角度。

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。如果未指定第二个参数，则值为零。

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

CSS 转换属性

下表列出了所有 2D 变换属性：

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。