CSS3+HTML5基础学习02（2D转换，旋转+动画）

1、2D转换之移动 translate
语法格式：
transform:translate(x,y)
X,Y要带单位，单位是px.
若只移动X坐标，那么Y坐标就是0
1.1X和Y可以分开写
transform:translateX(n);
transform:translateY(n);

translate最大的优点不会影响到其他元素

1.2，translate是可以用百分号的，，用了百分号后，移动的距离就是自身宽度或者高度的百分之多少。
假如一个盒子的宽度是100px，那么
transform:translateX(50%);就只是移动了50px
让一个元素垂直居中：
transform: translate(-50%, -50%);

注意：translate对行内元素没有效果

2、2D转换之旋转 rotate
语法： transform: rotate(度数);
rotate里面跟的是度数，单位是deg，比如rotate(45deg)
2.1、旋转角度为正时是顺时针，为负时，是逆时针

2.2、设置转换的中心点：transform-origin
transform-origin：X Y（注意用空格隔开）
默认的是：transform-origin：50% 50%

当然也可以给X和Y设置像素或者方位名词（top bottom left center)

3、2D转换之缩放 scale
语法：transform:scale(x，y)
x表示修改的是宽度，y表示修改的是高度，中间用逗号隔开，没有单位
transform:scale(1，1)：宽度和高度都放大一倍，相当于没有放大
transform:scale(2，2)：宽高都放大两倍
transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于transform:scale(2，2)
transform:scale(0.5,0.5)：数字<1 表示缩小

scale优点：不会影响到其他的盒子，而且还可以改变缩放的中心点
scale缺点：如果一个盒子有阴影，那么在放大的时候，阴影也会被一块放大

4、2D转换综合写法
语法：transform：translate() rotate() scale()…
例子： transform: translate(100px, 100px) rotate(90deg) scale(0.5);

注意：4.1、顺序一定不能改变，如果改变了顺序会影响旋转的效果，
4.2、当我们同时有移动（translate）和其他属性的时候，要将移动放到最前面（除了旋转木马案例那个比较特殊的以外，先旋转后移动，其他的要先移动后做其他事）只要不是移动的X和Y，那么就可以先旋转后移动

5、CSS3动画 animation
5.1、动画的基本使用
步骤：先定义动画（用keyframes定义动画）
再使用动画

定义动画：
@keyframes 动画名称 {
0% {
width:100px;
}
100% {
width:200px;
}
}
(1)0%是动画的开始，100%是动画的完成，这样的规则就是动画序列，百分比要是整数
(2)在@keyframes（关键帧）中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
(3)动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数
(4)请用百分比来规定变化发生的时间，或用关键词
"from"和"to“，等同于0%和100%

使用动画：
语法：
animation-name：动画名称；
animation-duration：持续时间；
这两句必须要写

5.2、动画属性
animation-timing-function：动画的运动曲线
animation-delay：规定动画何时开始
animation-iteration-count:：规定动画被播放的次数，默认是1， infinite表示无限循环
animation-direction：是否反方向播放，默认的是normal，alternate表示反方向播放
animation-fill-mode：动画结束后的状态，默认的是backwords，若想让它待在最后的位置，则用forwords

animation-play-state：规定动画是否正在运行或停止，默认是running，可以用paused表示停止

5.3、动画属性简写
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态（前两个属性一定要写）
animation: name duration timing-function delay iteration-count direction fill-mode;

5.4、动画的运动曲线
animation-timing-function：steps( )，表示分几步来完成这个动画，有了steps就不要写linear或者ease了

注意：元素可以添加多个动画，用逗号分割，