CSS平面转换
目录
平面转换
一、关键属性总结
二、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>