目前制作站点使用 DIV+CSS 可谓是主流了，而我还在使用着 table，看来需要学习一下新技术了，尤其在最近看到的一些 h5 和CSS3 制作的特效之后，不能再使用老版的CSS样式了，一定要跟紧网页设计嘲流，学习下 h5 和 css3，一些酷的网页效果都是用 H5 和 CSS3 来制作完成的，看来是网页设计中不可缺少的东东了，今天学到了 CSS3 中的 transform，夏日博客就来聊聊网页设计 CSS3 中的 transform 吧，感觉挺好玩的。

css3 transform 是什么？

是 css3 中一个制作网页变形效果的参数属性，其中使用之后可以制作出站点元素改变，转型及转换的效果。

CSS transform 都有哪些常用的属性，可以做出哪些网页效果？

transform 的属性有许多，在这里我们只介绍几种常见的属性吧，比如 rotate()/skew()/scale()/translate(,),每种属性还分有 x 和 y 的区别，例如如下属性: rotatex() 等，下面我们就来看一下这几种炫的效果吧。

transform:rotate()：

这个参数是旋转的意思，我们先看一下实例代码:

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

这句 CSS 样式的代码就是旋转网页元素多少度的意思了，这里的 10deg 是度的意思，10 deg 就表示旋转 10 度了，我们看一下运行之后效果如下图所示：

transform:skew()：

这个参数是倾斜了，同样的先看一下实例代码:

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

同旋转的效果参数一样，20deg 表示倾斜网页元素倾斜为 20 度，我们看一下实例图片，如下所示:

transform:scale()：

这个参数意思是让网页元素以指定倍数比例放大，如下代码:

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

这是以 1.5 倍的大小扩大当前网页元素，这个值我们可以进行更改，看如下的实例图片：

transform:translate()：

这个参数是让当前网页元素进行变动及位移，先看实例代码：

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

这里有两个参数值，这两个值为方向值，其中第一个能数是网页元素向左向右进行位移的，正数代表向右位移，负数代表向左位移，0 表示左右位置不变，后面的参数 0 是网页元素向上向下进行位移的，同样的，正数表示向上位移，负数表示向下位移，0 表示上下位置不变，这样就好理解上面的代码了，就是当前网页元素向右位移了 120px，上下位置不变，如下图效果所示：

好了，上面基本上就是 css3 transform 的常用属性了，我们可以借助这些属性做出一些比较酷的网页效果，当然，有时候对于排版来说，一些使用 CSS 样式来进行排版的，还不如直接使用 css3 transform 来得简单，好了，下面我们来看一下使用 css3 transform 做得更炫更酷的一个网页效果。

transform 综合实例代码如下:

.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

这个效果有点动画的感觉了，当鼠标放到网页元素上的时候，网页元素会在慢慢变大的同时进行旋转，因为是一个动画效果，图片就不截图了，大家可以自行测试一下，很炫酷的。