一. 过渡动画：transition

过渡动画的语法：

transition: 属性名 过渡时间 动画函数 开始时间;

transition: width 0.5s ease 1s, height 0.5s ease 1s;

注意：谁做过渡给谁添加 transition 属性

二. 2D 转换：transform

2D 转换包含以下几种常用变换：

• 移动：translate
• 旋转：rotate
• 缩放：scale

1. 移动：translate

transform: translate(水平距离, 垂直距离);

注意：

• 定义2D转换中的移动，沿着X轴和Y轴移动元素
• translate最大的优点：不会影响其他元素的位置
• translate中的百分比单位是相对于自身元素的，例如：translate(50%, 50%)
• 对行内标签没有效果

2. 旋转：rotate

transform: rotate(角度);

注意：

• rotate 函数接收角度值，单位为 deg，例如：rotate(45deg)
• 角度为正值时顺时针旋转，为负值时逆时针旋转
• 默认以元素中心点作为旋转中心

3. 转换中心点 transform-origin

transform-origin: 水平方向 垂直方向;

水平方向：left, center, right

垂直方向：top, center, bottom

还是使用百分比单位，例如：transform-origin: 50% 50%

也可以是准确的数值：transform-origin: 50px 50px

注意：

• 参数 x 和 y 之间用空格隔开
• x y 默认转换的中心点是元素的中心点（50% 50%）
• 还可以给 x y 设置像素值或者方位名词（top、bottom、left、right、center）

4. 缩放：scale

transform: scale(x, y);

x y 是缩放比例，值为1时，元素不缩放

注意：

• x 和 y 用逗号分隔，不跟单位表示倍数
• transform: scale(1, 1)：宽和高都放大一倍，相当于没有放大
• transform: scale(2, 2)：宽和高都放大了2倍
• transform: scale(2)：只写一个参数，第二个参数默认与第一个相同，相当于 scale(2, 2)
• transform: scale(0.5, 0.5)：缩小
• scale 缩放最大的优势：可以设置转换中心点，默认以中心点缩放，且不影响其他元素

5. 2D 转换综合写法

当需要同时使用多个 2D 转换效果时，可以将它们合并到同一个 transform 属性中。

语法格式：

transform: translate() rotate() scale() ...;

注意事项：

• 多个转换函数之间用空格分隔，顺序为：transform: translate() rotate() scale() 等
• 顺序会影响最终的转换效果（先旋转会改变坐标轴方向，进而影响后续转换）
• 当同时有位移（translate）和其他转换属性时，建议将位移放到最前面，以确保位置调整不受其他变换影响