DEV Community

NikiMunger
NikiMunger

Posted on

transform

#beginners #css

transform 是 CSS 的二维 / 三维变换属性：

  • 可以移动（translate）
  • 放大缩小（scale）
  • 旋转（rotate）
  • 倾斜（skew）
  • 3D 透视（perspective）

它是对元素的 渲染盒（rendering box） 做视觉变换，不影响文档流。

特性 解释
✔ 不改变文档流 元素的位置、大小不会影响其他元素
✔ GPU 加速 浏览器用 GPU 处理（动画流畅）
✔ 可以叠加多个变换 顺序不同，结果不同
✔ 动画性能极好 和 opacity 是最推荐做动画的属性
✔ transform-origin 决定变换中心 默认是 center center

transform 常用变换函数

1.translate：平移

transform: translateX(50px); /* 把元素在水平方向（X 轴）向右移动 50px。 */
transform: translateY(-20px); /* 把元素在垂直方向（Y 轴）向上移动 20px。 */
transform: translate(50px, -20px); /* translateX(50px) + translateY(-20px) */
transform: translate(50%, 0); /* 把元素水平移动“自身宽度的 50%”，垂直不移动。 */
Enter fullscreen mode Exit fullscreen mode
  • 移动元素，但不占据空间
  • 百分比基于 自身尺寸

2.scale：缩放

transform: scale(2);          /* 放大 2 倍 */
transform: scaleX(1.5);       /* 横向放大 */
transform: scaleY(0.5);       /* 竖向缩小 */
Enter fullscreen mode Exit fullscreen mode

3.rotate：旋转

transform: rotate(45deg);
transform: rotate(-90deg);
Enter fullscreen mode Exit fullscreen mode

旋转中心由 transform-origin 决定。

4.skew：倾斜

transform: skewX(20deg);
transform: skewY(5deg);
transform: skew(20deg, 5deg);
Enter fullscreen mode Exit fullscreen mode

5.matrix

包含所有 2D 变换的矩阵形式：

transform: matrix(a, b, c, d, e, f);
Enter fullscreen mode Exit fullscreen mode

适合高级动画或计算变换。

  • a：scaleX（水平缩放）
  • b：skewY（Y 轴倾斜）
  • c：skewX（X 轴倾斜）
  • d：scaleY（垂直缩放）
  • e：translateX（水平移动）
  • f：translateY（垂直移动）

6.3D 变换函数

transform: translateZ(50px); /* 把元素在“屏幕垂直方向”前移 50px */
transform: rotateY(180deg); /* 围绕 Y 轴旋转 */
transform: rotateX(30deg); /* 围绕 Y 轴旋转 */
transform: perspective(200px); /* 给此元素本次 transform 添加透视深度 */
Enter fullscreen mode Exit fullscreen mode

开启3D视角的必要代码

body {
  perspective: 600px; /* 透视距离（越小越夸张） */
}
Enter fullscreen mode Exit fullscreen mode

如果你想让子元素保持 3D：

transform-style: preserve-3d;
Enter fullscreen mode Exit fullscreen mode

但 它不是开启 3D 的必要条件，只是让子元素不被压扁。

transform-origin

默认：

transform-origin: 50% 50%;
Enter fullscreen mode Exit fullscreen mode

也就是元素中心。

你可以改变变换的中心：

transform-origin: left top;
transform-origin: bottom right;
transform-origin: 0 0;
transform-origin: 100px 50%;
Enter fullscreen mode Exit fullscreen mode

动画时特别关键，例如：

  • 从左侧展开：transform-origin: left
  • 从底部弹起：transform-origin: bottom

transform 的执行顺序（顺序不同结果不同） 

transform: translate(50px) scale(2);
Enter fullscreen mode Exit fullscreen mode

和

transform: scale(2) translate(50px);
Enter fullscreen mode Exit fullscreen mode

这 两个视觉结果完全不一样。

你可以把 transform 理解成“流水线处理”：
执行顺序：
第一段变换 → 第二段变换 → 第三段变换 …

transform 不会触发 reflow

改变 transform 不会影响布局，不会让其他元素重新排列。
浏览器只需要重新绘制图形（repaint），而且通常是 GPU 处理，非常快。
这是它被用于动画的主要原因。

注意

  1. transform 不会改变元素的实际宽高
    但会改变视觉形状
    例如 scale(2) 只是视觉放大，不会影响布局。

  2. transform 不会被其他元素“挤开”
    因为它不改变文档流。

Top comments (0)