transform 属性简介

transform 是一个 CSS 属性，用于对元素进行 二维（2D）或三维（3D）空间变换，而不影响页面的布局结构。常用于实现动画、过渡、旋转、缩放、位移等效果。

✨ transform 的语法

1

transform: none | <transform-function>+;

多个变换函数可以连写，用空格分隔，执行顺序是从左到右。

🔧 常用 transform 函数（2D）

🎥 动画中常配合使用

与 transition 一起使用：

1
2
3
4
5
6

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: scale(1.1) rotate(5deg);
}

与 @keyframes 动画配合：

1
2
3
4
5
6
7

@keyframes rotateMe {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader {
  animation: rotateMe 2s linear infinite;
}

🧠 transform 的特点和注意事项

1. 不会影响文档流：只会影响视觉呈现，不会影响其它元素的位置。
2. 性能优越：通常由 GPU 加速，适合用在动画上。
3. transform-origin：改变变换的参考点（默认是元素中心）：

   1	transform-origin: top left;

4. 与 z-index 无关：但可以配合 transform: translateZ(0) 触发硬件加速，解决渲染卡顿问题。

🎮 transform 与 3D 变换（进阶）

如果你需要使用 3D 效果，还可以使用如下方法：

⚠️ 使用 3D 变换时通常需要配合：

1

transform-style: preserve-3d;

🧩 transform 小技巧

• 居中元素（配合绝对定位）：

  1 2 3 4 5 6

  .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

• 按钮点击缩放反馈：

  1 2 3

  button:active { transform: scale(0.95); }

• 滑动菜单进入动画：

  1 2 3 4 5 6 7

  .menu { transform: translateX(-100%); transition: transform 0.3s ease; } .menu.show { transform: translateX(0); }

✅ 总结一句话：

transform 是实现各种炫酷动画和交互动效的灵魂属性，搭配 transition 和 animation 可以实现丰富的视觉体验！

• ← Previous Post
• Next Post →