Css 简明教程

CSS - 3D Transforms

CSS 提供了一组属性,允许你在三维空间中转换和调整元素。用于转换元素的属性包括 3D 平移、旋转、缩放、透视调整等。

下表列出了用于在三维空间中转换元素的所有各种属性:

Property

Description

backface-visibility

向用户设置元素背面可见性。

perspective

确定 z=0 平面与用户之间的距离。

perspective-origin

确定用户观察 3D 定位元素的位置。

rotate

在三维空间中旋转元素。

scale

在三维空间中缩放元素。

transform

在三维空间中变换元素。

transform-style

设置元素子项在三维空间中的位置或将其展平。

translate

在三维空间中平移元素。

matrix3d()

将三维变换定义为 4x4 齐次矩阵的函数。

perspective()

确定 z=0 平面与用户之间的距离的函数。

rotate3d()

在三维空间中围绕固定轴旋转元素。

rotateZ()

围绕 z 轴旋转元素。

scale3d()

在三维空间中向上或向下缩放元素。

scaleZ()

沿 z 轴向上或向下缩放元素。

translate3d()

在三维空间中平移元素。

translateZ()

沿着 z 轴向上或向下平移元素。