Css 简明教程

CSS - 3D Transforms

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

CSS provides a set of properties that allow you to transform and adjust the elements in the three-dimensional space. The properties that let you transform the elements include 3D translations, rotations, scaling, perspective adjustments, etc.

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

The following table lists all the various properties that are used to transform the elements in the three-dimensional space:

Property

Description

backface-visibility

Sets the visibility of back face of an element to the user.

perspective

Determines the distance between the z=0 plane and the user.

perspective-origin

Determines the position at which the user is looking at the 3D-positioned element.

rotate

Rotates an element in the three-dimensional space.

scale

Scales an element in the three-dimensional space.

transform

Transforms an element in the three-dimensional space.

transform-style

Sets the position of the children of an element in three-dimensional space or keeps it flattened in the plane.

translate

Translates an element in three-dimensional space.

matrix3d()

Function that defines a three-dimensional transformation as a 4x4 homogeneous matrix.

perspective()

Function that determines the distance between the z=0 plane and the user.

rotate3d()

Rotates an element around a fixed axis in three-dimensional space.

rotateZ()

Rotates an element around the z-axis.

scale3d()

Scales an element up or down in three-dimensional space.

scaleZ()

Scales an element up or down along the z-axis.

translate3d()

Translates an element in three-dimensional space.

translateZ()

Translates an element up or down along the z-axis.