转换（transform）
目录
作用：可以实现元素的位移旋转缩放等效果
- 移动：translate
- 旋转：rotate
- 缩放：scale
移动：translate
语法格式：
transform: translate(x(px), Y(px));
transform: translateX(X(px));
transform: translateY(Y(px));例
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate(100px, 100px);
/* transform: translateX(100px);
transform: translateY(100px); */
}
</style>
</head>
<body>
<div></div>
</body>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/*transform: translate(100px, 100px);*/
transform: translateX(100px);
/*transform: translateY(100px); */
}
</style>
</head>
<body>
<div></div>
</body>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/*transform: translate(100px, 100px);
transform: translateX(100px);*/
transform: translateY(100px);
}
</style>
</head>
<body>
<div></div>
</body>
特点：
- 定义2d转换中的移动，沿着xy轴移动元素
- 不会影响到其他元素
- translate中的百分比单位，%移动的距离是盒子自身的高度或宽度来对比的；
- transform对行内元素无效
应用：让一个盒子水平垂直居中
1.让父盒子添加相对定位
2.给该盒子添加绝对定位
top:50%;
left:50%
3.添加transform:tranlatr(-50%，-50%)；
旋转：rotate
作用：让盒子顺时针或逆时针旋转
语法：
transform：rotate（度数）重点：
1.单位是度数（deg）
例transform：rotate（45deg）
2.角度正时为顺时针，负数时为逆时针
3.默认旋转中心为元素的中心点
设置变换的中心点transform-origin
作用：设置元素的变换中心点
语法：
transform-origin：x y；重点：
默认的中心点为（50% 50%）
x y 可以设置百分比，像素，方位名词（top bottom left center）
缩放：scale
作用：放大缩小
语法
transform：scale(x,y);注意
1.里面写的是数字，不跟单位是倍数的意思，transform：scale(1,1)；就是原大小。
2.等比例缩放可以简写transform：scale(2)；等比例缩放2倍
3.与直接修改宽度和高度的优势：不会影响其他的盒子并且可以调整缩放的中心点
综合写法：
transform：translate(50px,50px) rotate(180deg) scale(2)...注意：
- 顺序会影响转换的效果（先旋转会改变坐标轴的方向）
- 同时有位移和其他时，需要把位移放在最前面。
