2.1 旋转变形
transform:rotate(45deg);就是
rotate就是旋转的意思，deg为单位，角度。
值可以是正数，也可以是负数： transform:rotate(-90deg) 等价于transform:rotate(270deg)
可以围绕X轴Y轴旋转 rottateX rotateY rotateZ
2.2 缩放变形
transform:scale(0.1);
scale就是缩放的意思，值是正数，放大就是大于1，缩小就是0~1。值没有单位。
可以写两个参数，用逗号隔开，表示横向的缩放倍数，和纵向的缩放倍数。
transform:scale(0.1,1);
可以拆开写：
transform:scaleX(0.1) scaleY(1);
2.3 斜切变形
skew就是斜切的意思，可以有两个值，分别表示横向斜切度数，纵向斜切度数。
transform:skew(30deg,10deg);
等价于：
transform:skewX(30deg) skewY(10deg);
如果想要有多个变形，用空格隔开
transform:skew(50deg,20deg) scale(2,0.2) rotate(40deg);
backface-visibility:hidden;//背面不可见
1.旋转轴：
transform-origin:0% 0px; transform:rotateY(45deg);
2.空间移动
transform:translateZ(300px); transform:translate3d(300px，300px,300px);
3.保留3d动效
transform-style:preserve-3d;
加上之后内部的小元素的3D变化将保留。
4.Animation 运动css
用from{} to{}。还能用百分比
@-webkit-keyframes yundong{ from{ } to{ left:700px; } 0%{ left:100px; } } @-webkit-keyframes
animation属性完整的调用一共有7个参数：
animation: yundong 1s linear 0s 5 alternate forwards;
第1个参数： 动画的名字
第2个参数： 动画的总时长，别忘了写s
第3个参数： 缓冲
第4个参数： 延迟时间，注意如果动画进行很多次，只有第一次开始前有延迟
第5个参数： 运动次数，要无限次写infinite
第6个参数： 是否来回运动，如果写alternate那么第偶数次将是时间轴的逆向
第7个参数： forwards表示当运动结束之后让这个元素保留在原地
velocity.js
可以独立于jquery运行的可以把它当做jquery的插件 跟里面的animation函数一样，但是他可以实现背景颜色的渐变运动！！！！！！！！！！！！！！！
二、选择器
CSS2.1中，选择器7种：
id选择器 #box
类选择器 .red
标签选择器 p
后代 div p
交集 div.red
并集 div,p
通配符 *
2.1 关系选择符
> 儿子，亲儿子，不是后代，必须是儿子
+ next sibling，下一个兄弟
~ next all siblings ，下所有兄弟
2.2 属性选择器
img[src="images/2.png"]{ border:10px solid red;
}方括号就是属性选择器，可以把任何HTML标签的属性当做选择器。
引申了几个选择器：
以val开头的，IE7兼容
p[class^="para"]{ color:red; }
以val结尾的，IE7兼容
p[class$="para"]{ color:red;
}
任何一个部分出现了val，IE7兼容
p[class*="para"]{ color:red;
}
以val开头，并且紧跟一个-，IE7兼容
p[class|="para"]{ color:red;
}
等价于
p[class^="para-"]{ color:red;
}
哲学上讲：
.red
等价于
[class~=”red”]
2.3 儿子序选择器
都是用伪类的符号“:”
只要一个p是某个元素的第一个儿子，那么选择它，IE7兼容
p:first-child
所以，和jQuery中$(“p:first”)不一样， 因为CSS3中的:first-child不吹哨排队。
jQuery： 爸爸去哪儿的比喻，村长李锐要吹哨，吹出所有的p，然后大排队，第一个p变红。
CSS3： 不吹哨大排队，只要你是家里的老大，你就被选择。
只要一个p是某个元素的最后一个儿子，那么选择它，IE9兼容
p:last-child
只要一个p是某个元素的第1个儿子，那么选择它，IE9兼容
p:nth-child(1)
下标从1开始。不能是0，不能是负数。
只要一个p是某个元素的倒数第3个儿子，那么选择它，IE9兼容
p:nth-last-child(3)
只要一个p是某个元素的倒数第8、11、14……个儿子，那么选择它，IE9兼容
p:nth-last-child(3n+8)
只要一个h3是某一个而元素的h3儿子中的第2个，那么选择它，IE9兼容
h3:nth-of-type(2)
比如下面的html结构，能够选择上的是：
<p></p> <p></p> <p></p> <p></p> <h3>h3</h3> <div> <h3>h3</h3> <h3>h3</h3> <h3>h3</h3> <h3>h3</h3> </div> <h3>h3</h3>
只要一个元素有.haha类并且是同种标签的第2个儿子，那么选择它，IE9兼容
.haha:nth-of-type(2)
倒数：
:nth-last-of-type(3)
总结一下，都暗含了是某个人的第几个儿子：
:first-child() 只有这个IE7兼容，一下统统IE9兼容 :last-child() :nth-child() :nth-of-type() :nth-last-child() :nth-last-of-type() :first-of-type() :last-of-type()
