Transformasi 3D CSS

Transformasi 3D CSS

CSS juga menyokong transformatif 3D.

Sila tinggalkan kursor mouse di atas elemen di bawah, anda boleh lihat perbezaan antara transformatif 2D dan 3D:

2D rotate
3D rotate

在本章中，您将学习如下 CSS 属性：

  • transform

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性 Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D 转换方法

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

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

rotateX() 方法

Putar X

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

实例

#myDiv {
  transform: rotateX(150deg);
}

亲自试一试

rotateY() 方法

Putar Y

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

实例

#myDiv {
  transform: rotateY(130deg);
}

亲自试一试

rotateZ() 方法

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

实例

#myDiv {
  transform: rotateZ(90deg);
}

亲自试一试

CSS 转换属性

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

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

CSS 3D 转换方法

函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,sudut) Tentukan putar 3D.
rotateX(sudut) Tentukan putar 3D sepanjang sumbu X.
rotateY(sudut) Tentukan putar 3D sepanjang sumbu Y.
rotateZ(sudut) Tentukan putar 3D sepanjang sumbu Z.
perspective(n) Tentukan paparan persepsi perspektif 3D elemen transformasi.