CSS Transforms：让你的网页舞动起来

CSS Transforms是我们制作CSS3动画的主要属性之一。Transforms的中文是变形的意思，它可以完成的功能主要包括：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

CSS Transforms又分为2D Transforms 和3D Transforms。下面我们来分别介绍。

Transforms语法：

transform ： none | <transform-function> [ <transform-function> ]* 
也就是：
transform: rotate | scale | skew | translate |matrix;                              
                            

CSS 2D Transforms

浏览器对CSS 2D Transforms的支持

浏览器对2D Transforms的支持比3D Transforms要广泛一些。2D transforms包括rotate() / skew() / scale() / translate()等。

上面的效果使用的是下面的代码（下面的代码没有使用浏览器厂商的前缀）：

#skew {
  transform:skew(35deg);
}
#scale {
  transform:scale(1,0.5);
}
#rotate {
  transform:rotate(45deg);
}
#translate {
  transform:translate(10px, 20px);
}
#rotate-skew-scale-translate {
  transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
}                              
                            

CSS transforms也可以使用transitions来制作动画效果。

CSS 3D Transforms

浏览器对CSS 3D Transforms的支持

3D CSS transforms和2D CSS transforms基本相同。它的基本属性有：translate3d、scale3d、rotateX、rotateY、rotateZ、translate3d和scale3d。它可以使元素在3D空间中进行旋转和翻转等。

上面的例子的代码如下（没有添加浏览器厂商的前缀）：

#transDemo4 div {
  transition:all 2s ease-in-out;
  perspective: 800px;
  perspective-origin: 50% 100px;
}
#transDemo4:hover #rotateX {
  transform:rotateX(180deg);
}
#transDemo4:hover #rotateY {
  transform:rotateY(180deg);
}
#transDemo4:hover #rotateZ {
  transform:rotateZ(180deg);
}                              
                            

CSS 3D Transforms制作一个立方体

你可以通过上面的控制条来变化立方体的各种3D透视效果：这些值的变化是通过jQuery代码来实现的。

CSS 3D Transforms制作一个3d幻灯片

Image 1 Image 2 Image 3 Image 4

点击上面的按钮来查看3d幻灯片效果！

小结

CSS Transforms可以使页面元素进行倾斜、旋转、翻转，还可以实现相应的2D和3D变换动画。使用CSS Transforms可以使我们的页面从枯燥无味变得生动起来。但是目前浏览器对CSS Transforms的支持有所欠缺，不过所有最新版本的现代浏览器都支持它。我们是时候使用CSS Transforms适当的为我们的网页添加一个炫酷的效果了。