CSS-Transform属性

CSS Transform属性

transform 属性用于对元素进行位移、旋转、缩放和倾斜等变换操作。

1. ==> translate

移动元素的位置，可以沿X轴和Y轴进行移动。

• 示例：

transform: translate(50px, 50px);

效果： 将元素向右下方移动50像素。

2. ==> rotate

旋转元素。

• 示例：

transform: rotate(45deg);

效果： 将元素顺时针旋转45度。

3. ==> scale

缩放元素的大小。

• 示例：

transform: scale(1.5);

效果： 将元素放大1.5倍。

4. ==> skew

倾斜元素。

• 示例：

transform: skew(10deg, -5deg);

效果： 将元素沿X轴和Y轴分别倾斜10度和逆时针倾斜5度。

5. ==> matrix

通过数学变换矩阵进行变换。

• 示例：

transform: matrix(a, b, c, d, tx, ty);

效果： 使用变换矩阵对元素进行复杂的变换，其中a、b、c、d用于缩放和旋转，tx和ty用于位移。

6. ==> perspective

给元素应用透视效果。

• 示例：

transform: perspective(100px);

效果： 给元素应用100像素的透视效果，使其看起来有深度。

7. ==> rotateX、rotateY、rotateZ

分别绕X轴、Y轴和Z轴旋转元素。

• 示例：

transform: rotateX(45deg);

效果： 绕X轴顺时针旋转元素45度。

8. ==> scaleX、scaleY、scaleZ

分别沿X轴、Y轴和Z轴缩放元素。

• 示例：

transform: scaleX(2);

效果： 沿X轴将元素放大2倍。