transform
transform 属性允许你在不影响文档流（Document Flow）的情况下，对元素进行移动、旋转、缩放。
transform 会占据原来的位置，但是它进行
移动的时候不会挤开别的元素。
常用变换函数 (2D)
-
translate(x, y) : 平移
- translateX(x): 仅在 X 轴上移动。
- translateY(y): 仅在 Y 轴上移动。
- 单位可以是 px, %, em 等。% 是相对于元素自身的尺寸。
-
scale(x, y) : 缩放
- scaleX(x): 水平缩放。
- scaleY(y): 垂直缩放。
- 值为 1 表示原始大小，scale(1.5) 放大 50%，scale(0.8) 缩小 20%。
-
rotate(angle) : 旋转
- 单位是 deg (度), rad (弧度), turn (圈) 等。rotate(90deg) 会顺时针旋转 90 度。
-
skew(x-angle, y-angle) : 倾斜
- skewX(angle): 沿 X 轴倾斜。
- skewY(angle): 沿 Y 轴倾斜。
- 这个效果不常用，但可以创造一些平行四边形的视觉效果。
性能优势：为什么 transform 如此快？
现代浏览器会将某些 CSS 操作交给 GPU（图形处理器）来处理，这个过程称为硬件加速。transform 和 opacity 就是最典型的可以被 GPU 加速的属性。
- 传统布局属性 (top, left, margin) : 改变它们会触发浏览器的重排 (Reflow/Layout) 和重绘 (Repaint) 。浏览器需要重新计算所有元素的位置和几何形状，这是一个非常耗费 CPU 资源的过程。
- transform: 改变它通常只会触发合成 (Composite) 。浏览器会将元素视为一个独立的图层（Layer），并直接在 GPU 中移动、缩放这个图层的位图。这个过程不涉及布局计算，因此速度极快，可以轻松达到 60fps，动画非常流畅。
transition
transition 定义了从状态 A 到状态 B 的过程。它让 CSS 属性值的变化不再是瞬间完成的，而是平滑地在一段时间内完成。 transition 是一个简写属性，可以分解为四个子属性：
-
transition-property: 指定要应用过渡效果的 CSS 属性名称（如 transform, opacity, width, background-color）。all 是默认值，表示所有可动画的属性。
-
transition-duration: 过渡效果持续的时间（如 0.3s 或 300ms）。
-
transition-timing-function: 过渡的速度曲线（动画的节奏）。
- linear: 匀速。
- ease: 慢-快-慢（默认值），最自然常用。
- ease-in: 慢速开始，加速结束。
- ease-out: 快速开始，减速结束。
- ease-in-out: ease 的增强版。
- cubic-bezier(n,n,n,n): 自定义贝塞尔曲线，可以创造出非常有弹性的动画效果。
-
transition-delay: 过渡效果延迟多长时间后开始。
/* 简写格式：property duration timing-function delay */
.box {
transition: transform 0.4s ease-in-out 0.1s;
}
/* 对多个属性应用不同的过渡 */
.box {
transition: transform 0.4s ease, opacity 0.2s linear;
}
.my-button {
background-color: #3498db;
color: white;
border: none;
padding: 15px 30px;
cursor: pointer;
/* 在初始状态定义 transition */
transition: transform 0.3s ease, background-color 0.3s ease;
}
.my-button:hover {
background-color: #2980b9;
transform: translateY(-5px) scale(1.05);
}
