css3中的变形和动画（3）

rotate 旋转，通过rotate()函数指定旋转的角度，元素相对原点进行旋转，
如果是正值，顺时针旋转，负值，元素相对原点逆时针旋转。


skew（），扭曲倾斜，它可以将一个对象以其中心为之围绕着X轴和Y轴按照
一定角度倾斜，会改变元素的形状。使用时，分为三种情况：1、skew(x，y)
是元素在水平和垂直方向同时扭曲。2、skewX(x)仅使元素在水平方向扭曲变形
3、skewY(y)仅使元素在垂直方向扭曲变形。


scale()缩放函数让元素根据中心原点对对象进行缩放。
scale(x,y)使元素在水平方向和垂直方向同时缩放。
scaleX(x)元素仅在水平方向缩放
scaleY(y)元素仅在水平方向缩放


translate()函数将元素在指定方向移动，类型position的relative。使用
translate函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何
Web组件。


matrix()矩阵函数，一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个
2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向
（X轴）和垂直方向（Y轴）重新定位元素。
http://www.css88.com/tool/css3Preview/Transform-Matrix.html


transform-origin，变换原点位置。任何元素都有一个中心点，默认情况下，
中心点居于X轴和Y轴的50%处。


transition-property动画过渡属性。
transition属性的几个子属性，
transition-property：指定过渡或动态模拟的css属性
transition-duration：指定完成过渡所需的时间
transition-timing-function：指定过渡函数，共有5个参数可选(ease/linear/
ease-in/ease-out/ease-in-out)
transition-delay：指定开始出现的延迟时间,是说当改变元素属性值后多长时间开始执行。


有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明
串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变
换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，
第二个为transition-delay。


Keyframes关键帧，在css3中主要以"@keyframes"开头，后面紧跟着动画名称加上一对花括号
@keyframes changecolor{
  0%{
   background: red;
  }
  50%{
   background: blue;
  }
  100%{
    background: green;
  }
}
div:hover{
  animation: changecolor 5s ease .1s;
}
animation的几个属性
animation-name；name必需和keyframes定义的完全一致，区分大小写。
animation-duration；动画时间持续时间
animation-timing-function；ease/linear/ease-in/ease-out/ease-in-out
animation-delay；动画开始推迟


animation-iteration-count，设置动画播放次数
infinite（无限次播放）/默认一次/可以填数字


animation-direction；属性设置动画播放方向，
normal为默认值，动画每次循环都是向前播放；
alternate，动画播放在偶数次向前播放，奇数次向反方向播放。


animation-play-state属性用来控制元素动画的播放状态，running和paused


animation-fill-mode属性定义动画开始之前和结束之后发生的操作
none、forwards、backwords、both
none||表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转(会有一段时间动画)到初始帧处
forwards||表示动画在结束后继续应用最后的关键帧的位置
backwards||会在向元素应用动画样式时迅速应用动画的初始帧
both||元素动画同时具有forwards和backwards效果


10-1.样式布局css3的多列布局
columns：多列布局
<column-width> <column-count>
<column-gap>用来设置列与列之间的间距
<column-rule>主要用来定义列与列之间的边框宽度、边框样式和边框颜色。column-rule不占用任何空间位置，在
列与列之间改变其宽度不会改变任何列的位置。

<column-span>跨列设置，主要用来定义一个分列元素中的子元素能跨列多少。