在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

}

过渡（transition）

​多个属性间使用,隔开

​如果所有属性都需要过渡，则使用all关键字

​大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡（auto不是有效数值，过渡动画效果不会生效）

时间单位：s 和 ms 1s = 1000ms

指定过渡的执行的方式

可选值：

transition-delay: 2s

可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟

动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发, 动画可以自动触发动态效果。

关键帧语法：

animation-name: 要对当前元素生效的关键帧的名字

animation-name: test

animation-duration: 4s

animation-delay: 2s

可选值：

可选值：

可选值：

可选值：

animation: test 2s 2 1s alternate 和transition 的简写类似 ，执行时间和延时时间顺序注意

变形就是指通过CSS来改变元素的形状或位置.

变形不会影响到页面的布局

transform 用来设置元素的变形效果

transform: translateY(-100px)

平移：平移元素，百分比是相对于自身计算的(px,100%)

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果

, 必须要设置网页的视距

/* 设置当前网页的视距为800px，人眼距离网页的距离 */

perspective: 800px

通过旋转可以使元素沿着x y 或 z旋转指定的角度 开视距效果明显

rotateX()

rotateY()

rotateZ()

单位 角度 deg、 n turn（圈）

**是否显示元素的背面 **

backface-visibility: hidden