scale()：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：scaleX()和scaleY()。

rotate()：用来旋转元素。

skew()：用来让元素倾斜。在此基础上有两个扩展函数：skewX()和skewY()。

matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

<p onclick="rotateDIV()" id="rotate1" class="animated_div" style="transform: rotate(360deg)">2D 旋转</p>

<p onclick="rotateYDIV()" id="rotatey1" class="animated_div" style="transform: rotateY(180deg)">3D 旋转</p>

<style>

p {

margin: 12px 0 0 0

line-height: 150%

}

#rotate1, #rotatey1 {

border: 1px solid #000000

background: red

margin: 10px

opacity: 0.7

}

.animated_div {

width: 60px

height: 40px

color: #ffffff

position: relative

font-weight: bold

padding: 20px 10px 0px 10px

float: left

margin: 20px

margin-right: 50px

border: 1px solid #888888

-webkit-border-radius: 5px

-moz-border-radius: 5px

border-radius: 5px

font: 12px Verdana, Arial, Helvetica, sans-serif

line-height: normal

text-align: center

vertical-align: middle

}

#rotate1,#rotatey1 { border:1px solid #000000 background:red margin:10px opacity:0.7 }

</style>

<script><!--var x,y,n=0,ny=0,rotINT,rotYINTfunction rotateDIV(){x=document.getElementById("rotate1")clearInterval(rotINT)rotINT=setInterval("startRotate()",10)}function rotateYDIV(){y=document.getElementById("rotatey1")clearInterval(rotYINT)rotYINT=setInterval("startYRotate()",10)}function startRotate(){n=n+1x.style.transform="rotate(" + n + "deg)"x.style.webkitTransform="rotate(" + n + "deg)"x.style.OTransform="rotate(" + n + "deg)"x.style.MozTransform="rotate(" + n + "deg)"if (n==180 || n==360) { clearInterval(rotINT) if (n==360){n=0} }}function startYRotate(){ny=ny+1y.style.transform="rotateY(" + ny + "deg)"y.style.webkitTransform="rotateY(" + ny + "deg)"y.style.OTransform="rotateY(" + ny + "deg)"y.style.MozTransform="rotateY(" + ny + "deg)"if (ny==180 || ny>=360) { clearInterval(rotYINT) if (ny>=360){ny=0} }}//--></script>

Chrome和safai需前缀加-webkit-，Foxfire需加前缀-moz-

1,旋转 rotate()

div{

width: 300px

height: 300px

transform:rotate(20deg)

}

2,扭曲 skew()

div {

width: 300px

height: 300px

transform:skew(45deg,-10deg)

}

3,缩放 scale()

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

也可以只缩放 x轴，或只缩放y轴。

div {

width: 200px

height: 200px

background: orange

}

.wrapper div:hover {

opacity: .5

transform: scale(0.8)

}

4,位移 translate()

translate()函数可以将元素向指定的方向移动，类似于position中的relative。

或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，

而不影响在X、Y轴上的任何Web组件。

5，原点 transform-origin

CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。

但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素

原点不在元素的中心位置，以达到需要的原点位置。

div {

transform: skew(45deg)

transform-origin:top

}

6,过渡

div {

width: 200px

height: 200px

background: red

margin: 20px auto

-webkit-transition-property: all

transition-property: all //指定过渡或动态模拟的css属性 （all是指所有）

-webkit-transition-duration:5s

transition-duration:5s //指定完成过渡的时间

-webkit-transition-timing-function: linear

transition-timing-function: linear//指定过渡的函数 linear/ease/ease-in/ease-out/ease-in-out/cubicbezier(n,n,n,n) n为0-1

-webkit-transition-delay: .18s

transition-delay:.18s //指定开始出现的延迟时间

}

div:hover {

width: 400px

height:400px

}

7，Keyframes被称为关键帧，css3中以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{...}”

@keyframes changecolor{

0%{

background: red

}

20%{

background:blue

}

40%{

background:orange

}

60%{

background:green

}

80%{

background:yellow

}

100%{

background: red

}

}

div {

width: 300px

height: 200px

}

div:hover {

animation: changecolor 5s ease-out .2s

}

等价于

div:hover{

animation-name:changecolor

animation-duration:5s

animation-timing-function:ease-out

animation-delay:1

animation-iteration-count:infinite//动画播放次数 整数。

animation-play-state:paused//主要用来控制元素动画的播放状态。

animation-direction:alternate//动画方向，normal每次循环向前，alternate偶次向前，奇数相反。

animation-fill-mode: both//设置动画时间外属性none、forwards、backwords和both

}