CSS中的过渡transition和变形transform

由于transition，transform，translate这几个单词总是记混，所以特此总结一下！

1. 过渡 transition

用法： transition：要过渡的属性 花费时间（写单位） 运动曲线 合适开始；
这个属性写在 要做动画的元素 的CSS样式里！

2.变形 transform

可以实现元素的位移 旋转 倾斜 缩放等，实现动画效果要配合过渡使用！

2.1 移动 translate

用法：transform: translate(x,y)；
　　　transform: translateX(x)；
　　　transform: translateY(y)；
　　　transform: translateZ(z)；
　　　transform: translate3d(x,y,z)；
参数可以为像素，也可以为百分数(translate3d中的z轴值除外)，如果是百分数，以自己的宽度为标准；
利用这一点可以实现定位盒子居中对齐,代码如下：

div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;    /*left和top是以父盒子宽度为标准*/
    top: 50%;
    transform: translate(-50% -50%);   /*以自己的宽度为标准*/  
}

2.2 缩放 scale

用法：transform: scale(x,y);
进行水平和垂直方向的缩放。默认取值是1，设置小于1的值为缩小；大于1的值为放大。

2.3 旋转 rotate

用法：transform： rotate(45deg);
正值为顺时针，负值为逆时针。单位是度数。
以自己的中心点为轴进行旋转
可以通过transform-origin设置旋转中心点
如 transform-origin：left top；
也可以使用像素设置中心点
沿轴进行旋转 rotateX(); rotateY(); rotateZ();

2.4 倾斜 skew

用法：transform：skew(30deg，0deg);
参数可为负值

2.5 透视 perspective

原理： z轴方向 近大远小，显示出3D效果
用法：perspective：1000px；
设置给父元素，作用于所有3D转换的子元素；