CSS | 二维变换

CSS 二维变换（2D Transform）是一组用于修改元素位置、大小或旋转的 CSS 属性。通过这些属性，可以通过 CSS 创造出一些非常酷炫的效果，让网页更加丰富有趣。

1. 常见属性

以下是常用的 CSS 二维变换属性：

• transform：定义元素的变换。
• translate：定义元素的平移。
• rotate：定义元素的旋转。
• scale：定义元素的缩放。
• skew：将一个元素沿 X 和 Y 轴倾斜。

2. transform

transform 属性允许你旋转、缩放、倾斜或平移给定元素。这是通过修改 CSS 空间中的坐标系来实现的，而不是修改文档的布局、内容或画布。

语法：

transform: none|transform-functions;

参数：

• none：默认值，不进行任何变化。
• transform-functions：变换函数，可使用多个函数，函数之间用空格隔开。

示例：

div {
  transform: rotate(45deg) translate(50px,50px) scale(1.5);
}

说明：该代码将 div 元素进行了3个变换：首先将其旋转了 45 度，然后平移到一个新的位置，最后将其放大 1.5 倍。

3. translate

translate 属性用于移动元素，可以通过指定 X 轴和 Y 轴的偏移量来实现。

语法：

translate: translate(x,y);

参数：

• x：水平方向上的移动距离，单位可以是 px、em 或百分比等。
• y：竖直方向上的移动距离，单位可以是 px、em 或百分比等。

示例：

div {
  transform: translate(50px, 20%);
}

说明：该代码将 div 元素向右移动 50 像素，向下移动父元素高度的 20%。

4. rotate

rotate 属性用于旋转元素，可以指定旋转的角度。

语法：

rotate: rotate(angle);

参数：

• angle：旋转的角度，单位是 deg（度数），可以使用负值来表示反向旋转。

示例：

div {
  transform: rotate(45deg);
}

说明：该代码将 div 元素顺时针旋转 45 度。

5. scale

scale 属性用于缩放元素，可以指定缩放的倍数。

语法：

scale: scale(x,y);

参数：

• x：水平方向上缩放的倍数。
• y：竖直方向上缩放的倍数。

示例：

div {
  transform: scale(1.5,0.5);
}

说明：该代码将 div 元素在水平方向上放大 1.5 倍，在竖直方向上缩小一半。

6. skew

skew 属性用于扭曲元素，可以将其沿 X 和 Y 轴倾斜一定的度数。

语法：

skew: skew(x-angle,y-angle);

参数：

• x-angle：元素沿 X 轴倾斜的度数，单位是 deg。
• y-angle：元素沿 Y 轴倾斜的度数，单位是 deg。

示例：

div {
  transform: skew(30deg,-20deg);
}

说明：该代码将 div 元素在水平方向上向右倾斜 30 度，在竖直方向上向上倾斜 20 度。

7. 其他注意事项

• 所有的 CSS 3D 变换属性，都可以被所有的 CSS 动画属性（如 transition）使用。
• 除了 transform 属性之外，其他二维变换属性，在更早的浏览器版本中可能不被支持，需要进行浏览器兼容性处理。

以上就是 CSS 二维变换的相关内容，希望可以帮助到大家。