目录
平面转换
一、关键属性总结
二、2D 变换函数
1. 平移（Translate）
2. 旋转（Rotate）
3. 缩放（Scale）
4. 倾斜（Skew）
三、变换原点（transform-origin）
四、组合变换
1. 多函数组合
2. 顺序影响效果
3. 层叠上下文
五、实用场景与代码示例
1. 悬停放大按钮
2. 居中元素
3. 旋转加载图标
4. 平行四边形导航
示例1：
示例2：
transform是 CSS 中用于对元素进行 2D 或 3D 变换 的属性，支持平移、旋转、缩放、倾斜等操作。它不改变页面布局流，仅影响元素的视觉呈现，常用于动画和交互效果。
平面转换
CSS 通过 transform 属性对元素进行 2D 空间变换，包括移动、旋转、缩放、倾斜等。
一、关键属性总结
| 转换类型 | 函数 | 核心作用 | 常用场景 |
|---|---|---|---|
| 平移 | translate() | 移动元素位置 | 微调布局、动画位移 |
| 旋转 | rotate() | 改变元素角度 | 图标旋转、卡片翻转 |
| 缩放 | scale() | 调整元素大小 | 悬停放大、焦点突出 |
| 倾斜 | skew() | 倾斜元素形状 | 斜切设计、动态变形 |
| 转换原点 | transform-origin | 定义变换基准点 | 绕特定点旋转、自定义缩放中心 |
二、2D 变换函数
1. 平移（Translate）
1. 函数与语法
-
translate(x, y)：沿 X 和 Y 轴移动。 -
translateX(x)：仅水平移动。 -
translateY(y)：仅垂直移动。
2. 示例
.box {transform: translate(50px, 20px); /* 向右 50px，向下 20px */
}-
应用场景：微调元素位置、实现悬停偏移效果。
2. 旋转（Rotate）
1. 函数与语法
-
rotate(angle)：顺时针旋转指定角度（负值逆时针）。
2. 示例
.box {transform: rotate(45deg); /* 旋转 45 度 */
}-
应用场景：图标旋转、卡片翻转动画。
3. 缩放（Scale）
1. 函数与语法
-
scale(sx, sy)：水平缩放sx倍，垂直缩放sy倍（单参数时等比例）。 -
scaleX(sx)：仅水平缩放。 -
scaleY(sy)：仅垂直缩放。
2. 示例
.box {transform: scale(1.2); /* 放大到 1.2 倍 */
}
.box:hover {transform: scale(1.5); /* 悬停时放大 */
}-
应用场景：按钮悬停放大、图片缩放效果。
4. 倾斜（Skew）
1. 函数与语法
-
skew(ax, ay)：水平倾斜ax度，垂直倾斜ay度。 -
skewX(ax)：仅水平倾斜。 -
skewY(ay)：仅垂直倾斜。
2. 示例
.box {transform: skew(15deg, 10deg); /* 水平倾斜 15°，垂直倾斜 10° */
}应用场景：创建平行四边形、斜切文字效果。
三、变换原点（transform-origin）
1. 作用
-
定义元素变换的 基准点（默认
50% 50%，即中心）。
2. 语法
-
关键字：
left top、center bottom。 -
长度值：
20px 30px。 -
百分比：
100% 100%。
示例：
.box {transform-origin: left top; /* 以左上角为基准点旋转 */transform: rotate(45deg);
}四、组合变换
1. 多函数组合
-
多个变换函数用 空格 分隔。
.box {transform: translate(50px, 0) rotate(45deg);
}2. 顺序影响效果
-
若需平移后固定方向：先平移再旋转
-
若需旋转后沿新方向移动：先旋转再平移
-
示例对比：
/* 先平移后旋转 */ .box1 { transform: translateX(100px) rotate(90deg); }/* 先旋转后平移 */ .box2 { transform: rotate(90deg) translateX(100px); }-
box1向右移动 100px 后旋转。 -
box2先旋转 90°，再沿新方向平移。
-
3. 层叠上下文
-
影响：
transform会创建新的层叠上下文，影响z-index的层级关系。
五、实用场景与代码示例
1. 悬停放大按钮
.button {transition: transform 0.3s;
}
.button:hover {transform: scale(1.1);
}2. 居中元素
.center {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); /* 精准居中 */
}3. 旋转加载图标
.loader {animation: spin 1s linear infinite;
}
@keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
}4. 平行四边形导航
.nav-item {transform: skewX(-20deg);
}
.nav-item p {transform: skewX(20deg); /* 反向倾斜文本保持水平 */
}示例1：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {display: flex;margin: 100px auto;width: 1366px;height: 600px;background-image: url(./res/bg.jpg);overflow: hidden;}.left,.right {width: 50%;height: 600px;background-image: url(./res/fm.jpg);transition: all 1s;}.right {background-position: right 0;}.box:hover .left {transform: translate(-100%);}.box:hover .right {transform: translate(100%);}</style>
</head>
<body><div class="box"><div class="left"></div><div class="right"></div></div></body>
</html>
示例2：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {margin: 100px auto;position: relative;width: 250px;height: 210px;}.box img {width: 250px;height: 210px; }.pic::after {position: absolute;content: "";width: 58px;height: 58px;top: 50%;left: 50%;background-image: url(./res/play.png);transition: all .7s; opacity: 0; overflow: hidden;transform: translate(-50%,-50%) scale(4);}.pic:hover::after {transform: translate(-50%,-50%) scale(1);opacity: 1; }</style>
</head>
<body><div class="box"><div class="pic"><img src="./res/party.jpeg" alt=""></div></div></body>
</html>
