变换 transform

说道变换，我们能想到那些变换呢？

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%），当设置相应的值后，基点会按照相应地设置的值发生变换，之后的变换会参照这个基点进行。