1.转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
2.2D转换的定义
2D转换是改变标签在二维平面上的位置和形状的一种技术。CSS的二维坐标系是下面这样，与数学上的不同
1.移动：translate
语法：
transform: translate(x,y);分开写：
transform: translateX(n);
transform: translateY(n);
注意：
1.定义2D转换中的移动，沿着X和Y轴移动元素
2.translate最大的优点：不会影响其他元素的位置（不同于margin和padding）
3.对行内标签无效
4.translate中的百分比单位是相对于自身元素的
translate的应用：盒子水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: green;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div><p></p></div>
</body>
</html>
效果图：
2.旋转：rotate
语法：
transform: rotate(度数);
有趣的旋转案例（鼠标经过，图片旋转360度）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
width: 300px;
/* 旋转90度，注意一定要写度数 */
border-radius: 50%;
border: 5px solid blue;
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./img/1.jpg" alt="" />
</body>
</html>
注意：
1.rotate里面跟度数，单位是deg比如rotate(45deg)
2.角度为正数，顺时针。角度为负数，逆时针。
3.默认旋转的中心点是元素的中心点
2D转化中心点的设置（transform-origin）
语法：
transform-origin: x y;注意：
1.后面的参数是用空格隔开的
2.x y默认转换的中心点是元素的中心点（50%，50%）
3.还可以给 x y 设置 像素 或者 方位名词（top bottom left right center）
案例：
1.方位名词
2.像素的方式：
3.缩放：scale
给元素添加了这个属性就可以控制它的放大和缩小。
1.语法
transform: scale(x,y);2.注意:
1.注意其中的x和y用逗号分隔
2.transform:scale(1,1):宽和高都放大一倍，相对于没有放大
3.transform:scale(2,2):宽和高都放大了2倍
4.transform:scale(2):只写一个参数，第二个参数则和第一个参数一样,相当于scale(2,2) transform:scale(0.5,0.5):缩小
5.sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
6.括号里面写的是数字不跟单位
案例演示：
4.综合写法
/* 要先写位移 */
transform: translate(x,y) rotate(x,y) scale(2); 注意
1.同时使用多个转换，其格式为:transform:translate() rotate() scale（）等
2.其顺序会影转换的效果。(先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前
