一.CSS3变形transform

　　1.平移：

　　　　translate(x,y) translateX(x) translateY(y)

　　注意：

　　　　如果想只向X轴平移那么可以translateX，如果想只向X轴平移那么可以translateY，X和Y不能共存。如果想向两个方向平移，那么使用translate

　　　　　　y轴

　　　　　　^ -

　　　　　　|

　　　　　　|

　　　　　　|

　　　　　　|

　　　　　　|

　-　　　　  |

 ---------------------------------> + x轴

　　　　　　|

　　　　　　|

　　　　　　|

　　　　　　|

　　　　　　|

　　　　　　| +

　　2.缩放：　　

　　　　scale(x放大倍数，y放大倍数) scaleX(x放大倍数) scaleY(Y放大倍数)

　　注意：

　　　　如果想放大那么写大于1的数，如果想缩小，那么写小于1的数

　　3.倾斜：

　　　　 skew(x轴倾斜角度，y轴倾斜角度) skewX(x轴倾斜角度) skewY(y轴倾斜角度)

　　注意：

　　　　x轴为正值按照逆时针x轴为负值按照顺时针，y轴正值为顺时针倾斜，y轴负值为逆时针倾斜

　　4.旋转：

　　　　 rotate(旋转角度) 正值为顺时针旋转，负值为逆时针旋转

二.CSS3过渡

　　transition:

　　　　需要过度的属性 过度时间(s) 过度动画函数 延迟时间(s)

　　过渡动画函数：

　　　　ease：

　　　　　　速度由快到慢（默认值）

　　　　linear：

　　　　　　速度恒速（匀速运动）

　　　　ease-in：

　　　　　　速度越来越快（渐显效果）

　　　　ease-out：

　　　　　　速度越来越慢（渐隐效果）

　　　　ease-in-out：

　　　　　　速度先加速再减速（渐显渐隐效果）

　　img:hover{

　　　　transform: rotate(90deg) scale(1.2);

　　　　transition: all 1s linear 1s;

　　}

　　过渡处罚机制：

　　　　伪类触发

　　　　：hover

　　　　：active

　　　　：focus

　　　　：checked

　　媒体查询：

　　　　通过@media属性判断设备的尺寸，方向等

　　JavaScript触发：

　　　　用JavaScript脚本触发

三.CSS3动画

　　1.设置关键帧

　　　　@keyframes 关键帧名称{

　　　　0%{

　　　　width: 0;

　　　　transform: scale(1.5);

　　　}

　　　　33%{

　　　　width: 60px;

　　　　transform: translate(200px,0px) scale(2);

　　　}

　　　　66%{

　　　　width: 120px;

　　　　transform: translate(300px,0px);

　　　}

　　　　100%{

　　　　width: 200px;

　　　　transform: translate(400px,0px);

　　　}

　　　}

　　2.调用关键帧

　　　　animation:

　　　　　　关键帧名称 执行时间 播放方式 延迟时间 播放次数;