Css 简明教程

CSS - 2D Transforms

CSS 提供了一组可让你在二维空间中变换和调整元素的属性。允许你变换元素的属性包括平移、旋转、缩放、倾斜等。

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

Property

Description

rotate

按指定角度旋转元素。

scale

按指定比例缩放元素。

transform

变换元素,如旋转、缩放、倾斜或平移。

transform-box

定义用于变换的布局框。

transform-origin

设置元素变换的原点。

translate

将一个元素从当前位置移动。

matrix()

根据六个矩阵值定义元素的变换。

rotate()

围绕二维空间中的一个固定点旋转一个元素。

rotateX()

围绕二维空间中的水平轴旋转一个元素。

rotateY()

围绕二维空间中的垂直轴旋转一个元素。

scale()

在二维空间中放大或缩小一个元素。

scaleX()

水平地放大或缩小一个元素。

scaleY()

垂直地放大或缩小一个元素。

skew()

在二维空间中倾斜一个元素。

skewX()

在水平方向上倾斜一个元素。

skewY()

在垂直方向上倾斜一个元素。

translate()

在二维空间中平移一个元素。

translateX()

Translates an element horizontally.

translateY()

Translates an element vertically.