CSS3 变换小折腾

为了使用大部分 CSS3 特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分 CSS3 属性。而且不幸的是，一些属性甚至到最后都可能不被 W3C 推荐，所以通过指定浏览器专有属性，将他们与标准属性区分开来是很重要的（当他们是多余的的时候使用符合标准的样式将之覆盖）。

最常见的私有属性是用于 Webkit 核心浏览器的(比如, Safari)， 它们以 -webkit- 开始，以及 Gecko 核心的浏览器(比如 Firefox)，以 -moz- 开始，还有 Konqueror (-khtml-)、Opera (-o-) 以及 Internet Explorer (-ms-) 都有它们自己的属性扩展（目前只有 IE8 支持 -ms- 前缀）。

被 CSS3 的动感所吸引，下午折腾了一下，成果就像你现在用 Chrome 或者 Opera 浏览本博并用鼠标经过文章标题的效果一样(FireFox下并不理想)。
使用的 CSS 如下:

h2{
	-moz-transform: translate(0px, 0px);
	-moz-transition-duration:0.3s;
	-webkit-transform: translate(0px, 0px);
	-webkit-transition-duration:0.3s;
	-o-transform:translate(0px, 0px);
	-o-transition-duration:0.3s;
}

h2:hover{
	-moz-transform: translate(10px, 0px);
	-moz-transition-duration:0.3s;
	-webkit-transform: translate(10px, 0px);
	-webkit-transition-duration:0.3s;
	-o-transform:translate(10px, 0px);
	-o-transition-duration:0.3s;
}

CSS3 吸引人的当然不只这个，折腾人的是因为它还未成为标准，还有各种不同标准的浏览器…