transform（）

一、2D变形 transform

移动 translate(x, y)

translate（）位移方法  ，有两个参数（x轴平移距离，y轴平移距离），从当前元素位置移动

translate(50px,50px); 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。可以改变元素的位置，x、y可为负值；

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）

.box {
    width: 499.9999px;
    height: 400px;
    background: pink;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);  /* 走的自己的一半 */
}

2、缩放 scale(x, y)

scale（）元素宽高增加或减少的大小，类如transform: scale(1,2)宽不变，高放大两倍

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

3、旋转 rotate()

rotate()可以对元素进行旋转，正值为顺时针，负值为逆时针

注意单位是 deg 度数

div{
  width:100px;
  height:100px;
  background-color: aqua;
  transform: rotate(45deg);
}

二、空间转换（3D转换）

定义：由x，y，z轴组成立体空间，z轴与视线方向相同简单记住他们的坐标：

x左边是负的，右边是正的
y 上面是负的，下面是正的
z 里面是负的，外面是正的

1、rotateX()

就是沿着 x 立体旋转

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

2、rotateY()

沿着y轴进行旋转

img {
  transition:all 0.5s ease 0s;
}
img:hove {
  transform:rotateY(180deg);
}

3、rotateZ()

沿着z轴进行旋转

img {
    transition:all 0.5s ease 0s;
}
img:hove {
    transform:rotateZ(180deg);
}

css3常见动画(transform)