在CSS3中，通过 transform 属性来使用 transform 功能。

使用 rotate 方法，在参数中加入角度值，角度值后面跟表示角度单位的 deg 文字即可，旋转方向为顺时针旋转。

运行效果：

使用 scale 方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。

上面的示例使 div 元素缩小了50%。

另外，可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率。

上面的示例使 div 元素水平方向缩小了50%，垂直方向放大了一倍。

效果如图：

使用 skew 方法来实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

上面的示例使 div 元素水平方向上倾斜了30度，垂直方向上倾斜了30度。

效果如图：

另外， skew 方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜。

使用 translate 方法来将文字或图像进行移动，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

上面的示例把 div 元素水平方向上向右移动了 50px ，垂直方向上向上移动了 50px 。

另外， translate 方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这种情况下视为只在水平方向上进行移动，垂直方向上不移动。

示例1：

效果如图：

示例2：

效果如图：

这两个示例都是对同一个页面中同一个元素进行多重变形的示例， 而且各种变形方曲中所使用的参数也都相同，差别只是使用三种变形方法的先后顺序不一样。但，元素在两个页面上所处位置并不相同。说明 transform 参数的顺序不同，结果可能会不一样。

在使用 transform 方融进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用 transform-origin 属性，可以改变变形的基准点。

接下来，我们使用 transform-origin 属性把变形的基准点修改为第二个元素的左下角处。

运行效果：

transform-origin 属性的两个参数分别代表：基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置，其中"基准点在元素水平方向上的位置"中可以指定的值为 left 、 center 、 right ， "基准点在元素垂直方向上的位置"中可以指定的值为 top 、 center 、 bottom 。

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

}

1. perspective()函数与perspective属性

在3D变形中，除了perspective属性可以激活一个3D空间外，在3D变形的函数中的perspective()也可以激活3D空间。

不同的地方是：perspective用在舞台元素上（变形元素们共同的父元素）；perspective()就是用在当前变形元素上，并且可以与其他的transform函数一起使用。例如，可以把：

.stage {    perspective: 600px}123

写成：

.stage .box {    transform: perspective(600px)}123

perspective 属性和perspective()函数功能一样，但其取值以及运用的对象有所不同。

perspective属性可以取值为none或长度值；而perspective()函数取值只能大于0，如果取值为0或比0小的值，将无法激活3D空间；

perspective属性用于变形对象父元素；而perspective()函数用于变形对象自身，并和transform其他函数一起使用。

2. perspective-origin

perspective-origin属性必须定义父元素上。通常perspective-origin属性本身不做任何事情，他必须被定义在设置perspective属性的元素上。换句话说，perspective-origin属性需要与perspective属性结合起来使用，以便将视点移至元素的中心以外的位置。

3. backface-visibility属性

backface-visibility属性决定元素旋转背面是否可见。对于未旋转的元素，该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。

visible: 默认值，反面可见

hidden：反面不可见

一个元素