说道变换，我们能想到那些变换呢？
1、位移 translate
body {
width: 500px;
height: 200px;
border:5px solid black;
}
div{
width: 100px;
height: 100px;
background: red;
transition: 5s;
}
第一种: X轴、Y轴分开写
body:hover div{
transform: translateX(300px);
}
原始状态.png
hover后状态.png
translateX(300px) 表示在X轴(水平方向上)向右移动300px
translateX(-30px) 表示在X轴向左移动30px
translateY(200px) 表示在Y轴(竖直方向上)向下移动200px
translateY(-200px) 表示在Y轴上向上移动200px
第二种：合写
body:hover div{
transform:translate(200px,20px);
}
表示在X轴上向右移动200px，在Y轴上向下移动20px，如图：
原始状态.png
hover状态.png
注意：
transform：translate(200px); 中写一个值表示在X轴方向上移动
2、旋转 rotate
rotate 当中接受的时一个旋转角度，如45deg，单位是deg
rotate()中，正值是顺时针，负值是逆时针
body:hover div{
transform:rotate(45deg);
}
效果如下图：
原始状态.png
hover状态.png
3、缩放 scale
scale 当中接受的时一个数值，可以是浮点数，如1.2或者0.3或者2
scale() 中数值 大于1是放大效果，小于1是缩小效果
数值为0时元素彻底消失
body:hover div {
transform:scale(0.5); 缩小至0.5倍，如下图所示
}
原始状态.png
hover状态.png
4、变形/斜切 skew
skew当中接受的也是一个旋转角度，如40deg
skewX()
skewY()
skew(30deg,30deg)第一个值是X轴的斜切角度，第二个值是Y轴的斜切角度
那么说完这四种变换，他们连写方式是怎样的呢？
按照下面这个顺序来写：
body:hover div{
transform:translate(200px,0) rotate(45deg) scale(1.5) skew(15deg,15deg);
}
原始状态.png
hover状态.png
学习到此处，我们有没有想到一个问题，这些变换是基于那个基点进行的呢？下面我们解释一个名词——变换基点
transform-origin
left
top
right
bottom
center
支持负值、正值、百分数
默认值是center（即50%），当设置相应的值后，基点会按照相应地设置的值发生变换，之后的变换会参照这个基点进行。
