一.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%{
0;
transform: scale(1.5);
}
33%{
60px;
transform: translate(200px,0px) scale(2);
}
66%{
120px;
transform: translate(300px,0px);
}
100%{
200px;
transform: translate(400px,0px);
}
}
2.调用关键帧
animation:
关键帧名称 执行时间 播放方式 延迟时间 播放次数;