CSS 2D 转换

CSS transform 属性允许你对元素进行移动、旋转、缩放和倾斜。这些变换发生在二维空间中，并且不会影响周围元素的布局，因为它们是在元素渲染之后才应用的。

transform 属性

transform 属性可以接受一个或多个转换函数 (transform functions) 作为其值。

translate()

translate() 函数用于在水平和/或垂直方向上移动元素。它接受一个或两个值。

• translate(x, y): 分别在 X 轴和 Y 轴上移动。
• translate(x): 只在 X 轴上移动。
• translateX(x): 同上。
• translateY(y): 只在 Y 轴上移动。

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

rotate()

rotate() 函数用于顺时针旋转元素。它接受一个角度值。

• 单位: deg (度), grad (梯度), rad (弧度), turn (圈)。最常用的是 deg。

div {
  transform: rotate(20deg);
}

scale()

scale() 函数用于缩放元素的大小。

• scale(x, y): 分别在 X 轴和 Y 轴上缩放。值 > 1 表示放大，< 1 表示缩小。
• scale(number): 在 X 和 Y 轴上等比例缩放。
• scaleX(x): 只在 X 轴上缩放。
• scaleY(y): 只在 Y 轴上缩放。

div {
  transform: scale(2, 0.5); /* 宽度放大到2倍，高度缩小到0.5倍 */
}

skew()

skew() 函数用于在 X 和 Y 轴上倾斜元素。它接受一个或两个角度值。

• skew(x-angle, y-angle)
• skewX(angle): 只在 X 轴上倾斜。
• skewY(angle): 只在 Y 轴上倾斜。

div {
  transform: skewX(20deg);
}

transform-origin 属性

默认情况下，所有转换都是围绕元素的中心点 (50% 50%) 发生的。transform-origin 属性允许你改变这个转换的原点。

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

多重转换

你可以在一个 transform 声明中应用多个转换函数，用空格隔开。注意，应用的顺序很重要，因为后面的转换是基于前面转换的结果进行的。

div {
  transform: translate(50px) rotate(30deg) scale(1.2);
}

2D 转换与 transition 和 animation 属性结合使用时尤其强大，可以创建出平滑、引人注目的动态效果。