一.2D转换
属性：translate() x,y位置移动
rotate（） 顺时针旋转角度（单位deg，负数为逆时针）
scale（） x，y元素尺寸增加或减少
skew（） x，y方向进行拉扯（横拉，竖拉）
1.translate
通过translate的方法，根据给定的left（x坐标）和top（y坐标位置）让元素从其当前位置移动。
列如：
transform：translate（50px，100px）；
值translate（50px，100px）把元素从左侧向右移动50px，从上端向下移动100px
2.rotate（）
通过rotate（），元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转给定的角度
列如：
transform：rotate（30deg）
transform：rotate（-45deg）
3.scale（）
通过scale方法，根据给定的宽度（X轴）和高度（Y轴）参数，元素的尺寸会增加或者减少
列如：
transform：scale（2，0.6）
X轴扩大到2倍，y轴扩大到0.6倍
4.skew（）方法
通过skew（）方法，根据X轴或者Y轴进行对元素的拉扯
列如：transform：skew（10deg，20deg）
二.3D转换
rotateX（）围绕X轴进行前后翻转
rotateY（）围绕Y轴进行前后翻转
列：transform：rotateX（120deg）
CSS3过度
过度是元素从一种样式逐渐改变为另一种样式的效果（动画化）
属性：transition
列如：
div{
width:100px;
height:100px;
transition: width 2s linear 5s;
}
div：hover{
width:300px;
}
（鼠标悬停在div上，div变为宽度300，动画共2秒钟，动画速度平均，5秒钟开始动画）
CSS3动画（ 动画（@keyframes） ）
步骤：
1. 规定动画的名称
2. 用百分比来规定变化发生的过程（关键词 "from" 和 "to"，等同 于 0% （开始）和 100%（结束））
3. 捆绑到某个选择器
4. 规定动画的时长
直接设置开始和结束
列：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
2.animation
animation属性： 属性：
animation-name: myfirst;//动画名称
animation-duration: 5s;//动画执行时间
animation-timing-function: linear;//动画执行效果
animation-delay: 2s;//动画推迟时间
简写：
animation: myfirst 5s linear 2s infinite alternate;