CSS3 transform 简单使用
/* 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/]
