/* firefox & webkit 浏览器中有效 */
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color : #DEE4EE;
color : #305999;
width : 380px;
height : 70px;
line-height : 70px;
font-weight : bold;
text-align : center;
margin : 50px auto;
}
.rotate{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg)
}
.skew{
-webkit-transform:skew(40deg);
-moz-transform:skew(40deg)
}
.scale{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5)
}
.translate{
-webkit-transform:translate(-100px,-30px);
-moz-transform:translate(-100px,-30px);
}
.animation {
-webkit-transition : all 1s ease-in-out;
-moz-transition : all 1s ease-in-out;
}
.multiple: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);
}
</style>
</head>
<body>
<div>transform(base)</div>
<div class="rotate">transform[旋转:rotate(10deg)]</div>
<div class="skew">transform[倾斜:skew(40deg)]</div>
<div class="scale">transform[缩放:scale(1.5)]</div>
<div class="translate">transform[位移:translate(-100px,-30px)]</div>
<div class="animation multiple">transform[animation]</div>
</body>
</html>
?[参考:http://www.daqianduan.com/css3-transform/]
