元素缩放scale()
1、scale(x,y) 对元素进行缩放。X表示水平方向缩放的倍数 ,Y表示垂直方向的缩放倍数Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。
2、scaleX(n) 元素只在X轴(水平方向)缩放元素。默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点。同理,scaleY(n) 元素只在Y轴(垂直方向)缩放元素。
如下例:
<html>
<head>
<style type="text/css">
.test{
width:200px;
height:50px;
background-color:gray;
color:white;
text-align:center;
cursor:pointer;
display:table-cell;
vertical-align:middle;
}
</style>
<script type="text/javascript">
function scale1(){
document.getElementById("test").style.WebkitTransform="scale(1.1,1)";
document.getElementById("test").style.WebkitTransform="translate(120px)";
document.getElementById("test").style.WebkitTransform="skew(20deg)";
document.getElementById("test").style.WebkitTransform="rotate(370deg)";
}
function scale2(){
document.getElementById("test").style.WebkitTransform="scale(1)";
}
</script>
</head>
<body>
<div style="margin:0 0 0 100px;">
<div class="test" id="test" onMouseOver="scale1()" onMouseOut="scale2()">
这是一个缩放效果测试!
</div>
<div>
</body>
</html>
元素移动translate(120px),用法同上;
元素倾斜skew(10deg),deg代表"度",用法同上;
元素旋转rotate(10deg),用法同上,按顺时针旋转,没有X、Y轴;