浏览器制造商（像Microsoft、Mozilla等，还有WebKit的后台人员等）通常会为他们的浏览器增加新的功能来测试新的特性，
或者实现一直在考虑但还没有得到标准组织批准的CSS扩展。在这些情况下，开发商会创建类似这样的CSS属性：
-moz-transform: 第一个是短横线"-"；第二个是开发商标识符，moz指Mozill；后面是一个短横线"-"；最后是属性
通常可以在各个浏览器的开发文档和发行说明中找到这些开发商特定的属性，
或者可以加入与各浏览器开发过程相关的论坛，从中可以了解到开发商特定的属性。
例如：
div{
transform: rotate(45deg); // 通用属性，以保证属性得到支持，或者至少将来得到支持
-webkit-transform: rotate(45deg); //safari chrome
-moz-transform: rotate(45deg); //Mozilla
-o-transform: rotate(45deg); //Opera
-ms-transform: rotate(45deg); //IE
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#box{
position:absolute;
top:100px;
left:200px;
width:200px;
height:200px;
background-color:#ff0000;
transition: transform 2s; /* transition属性指出：如果transform属性的值改变，要在指定的实际内从当前transform值过度到新的transform值 */
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-o-transition: -o-transform 2s; /*
transition属性值也是一个属性，在这里transition属性值为transform，另外还有一个持续的时间(duration),即2s。
指定的属性值改变是，transition会使这个变化在指定的时间内完成，这就是产生一个中动画效果。还可以对其他CSS属性
完成过度，如width或者opacity。
*/
}
/* 当鼠标悬停时，div旋转45度 */
#box:hover{
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>