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.当我们同时有位移和其他属性的时候，记得要将位移放到最前
