# 文章目录
# 一、2D 转换 transform
转换( transform) 是 CS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
转换( transform)你可以简单理解为变形
- 移动：translate
- 旋转：rotate
- 缩放：scale
# 1.1 2D 是什么?
2D 转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系。
# 二、translate 移动
2D 移动是 2D 转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
# 2.1 语法
- transform: translate(x,y)
- transform: translateX(n) 只移动 X 轴
- transform: translateY(n) 只移动 Y 轴
# 2.2 特点
- 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
- translate 最大的优点： 不会影响到其他元素的位置
- translate 中的百分比单位是相对于自身元素的 translate(50%,50%)
- 对行内标签没有效果
# 2.3 实现水平垂直居中
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
1
2
3
4
5
2
3
4
5
注意这里的原理：transform 是相对自身元素的一半来移动的，而定位的 50%，刚好需要子元素的一半来修正偏差，所以正好达到水平垂直居中的效果
.father {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: teal;
position: absolute;
left: 50%;
top: 50%;
/*transform: translate(-100px,-100px);*/
/*由于translate 的百分比正好是依据自身元素来定位的，所以-50%正好可以十分灵活的实现水平垂直居中*/
transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 三、rotate 旋转
2D 旋转指的是让元素在 2 维平面内顺时针旋转或者逆时针旋转。
# 3.1 语法
transform:rotate(度数)
重点：
- rotate 里面度数，单位是 deg 如 rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
# 3.2 利用旋转做一个 下拉三角
div{
width: 249px;
height: 50px;
border: 1px solid #000;
position: relative;
}
div::after{
content: '';
display: inline-block;
position: absolute;
top: 15px;
right: 10px;
width: 15px;
height: 15px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 3.3 设置旋转中心点 transform-origin
利用该属性，我们可以给元素设置旋转的中心点。
语法：
transform-origin:x y;
注意：
- 后面的参数 x 和 y 用空格隔开
- x y 默认转换的中心点是元素的中心点(50%50%) (center center)
- 还可以给 x y 设置像素或者方位名词( top bottom left right center)
示例：
围绕左下角旋转：left bottom
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
div {
width: 100px;
height: 100px;
background-color: pink;
transition: all 1s;
transform-origin: left bottom;
}
div:hover {
transform: rotate(360deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 三、scale 缩放
缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
# 3.1 语法
transform:scale(x,y)
注意点：
- 注意其中的 x 和 y 用逗号分隔
- transform: scale(1,1):宽和高都放大一倍，相对于没有放大
- transform: scale(2,2):宽和高都放大了 2 倍
- transform scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2.2)
- transform: scale(0.5,0.5):缩小
- sacle 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
# 3.2 案例 放大两倍
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all 0.3s;
}
div:hover {
transform: scale(2);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 3.3 设置缩放中心点 也是 transform-origin
div {
width: 200px;
height: 200px;
background-color: pink;
transform-origin: right center;
transition: all 0.3s;
}
div:hover {
transform: scale(2);
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
效果：
# 四、综合写法
- 同时使用多个转换，其格式为： transform: translate rotate scale… 等
- 其顺序会影转换的效果（先旋转会改变坐标轴方向）
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前
示例：
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
div {
width: 200px;
height: 200px;
background-color: teal;
transition: 0.3s;
}
div:hover {
transform: translate(150px, 150px) rotate(180deg);
/* 以下写法效果异常：会先旋转再位移 */
/* transform:rotate(180deg) translate(150px,150px) ; */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
效果：
