- 转换（transform）是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
移动（translate）
- 可以改变元素在页面中的位置，类似定位
- 注意：位移写在公式最前面
- 语法：transform:translate(x, y) x轴和y轴的位置，
注意：这里的y轴和数学中的y轴是反的。
坐标轴.PNG
- 如果只需要移动一条轴可以分开写
transform:translateX(值)
transform:translateY(值)
- 重点：
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的优点，不会影响其他元素的位置
- translate中的百分比单位是相对于自身元素的translate（50%，50%）
- 对行内标签没有效果
旋转（rotate）
- 语法：transform:rotate(度数) 单位deg
- 重点：
- 角度为正，顺时针。角度为负，逆时针
- X,Y默认旋转的中心点是元素的中心点（50% 50%），等价于center，center
- 还可以给x y设置 像素 或者方位名词（left，bottom，right，top， center）
比如left，bottom就是左下角
如何设置元素旋转的中心点
- 语法：transform-origin: x y;
缩放（scale）
- 语法：transform:scale(x, y)
- 注意逗号分隔
- transform:scale(1，1)宽高都放大一倍，相当于没有放大
- transform:scale(2，2)宽高都放大2倍
- transform:scale(2) 只写一个参数，第二个参数和第一个参数一样
- transform:scale(0.5，0.5)小于一就是缩小
- 优势：可以设置中心点，而且不影响其他盒子
倾斜（skew）
- skew() 函数定义了一个元素在二维平面上的倾斜转换
- skew()方法跟translate()方法、scale()方法一样，也有3种情况：
- skewX(x)：使元素在水平方向倾斜（X轴倾斜）,方法会保持高度
- skewY(y)：使元素在垂直方向倾斜（Y轴倾斜）,方法会保持高度
- skew(x,y)：使元素在水平方向和垂直方向同时倾斜
X轴和Y轴同时倾方法会先按照skewX方法倾斜，然后按照skewY方法倾斜
- 语法：transform：skew（x，y）单位deg
2D转换综合写法
- 注意：
- 同时使用多个转换，其格式为: transform:translate() rotate() scale()...等
- 其顺序会影响转换的效果（先旋转会改变坐标）
- 当我们同时有位移和其他属性的时候，记得要将位移放在最前面
简单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<p>鼠标移到div</p>
</body>
<style>
div{
width: 50px;
height: 50px;
background-color: aqua;
transition: all .5s;
}
div:hover {
transform:translate(200px,200px) rotate(45deg) scale(2.5)
}
</style>
</html>
