常见的css3缩放效果

transform的属性scale(x,y) 对元素进行缩放,x表示水平方向缩放倍数，y表示垂直方向的缩放倍数，y是可选参数，不设置，则表示两个方向的倍数是一样的，基点一样在元素的中心位置。

还有单向拉伸的scaleX和scaleY。

<html>
<head>
<title>Demo</title>
<style type="text/css">
.box{width:300px; height:169px;overflow:hidden;}
.suofang{display:block;width:300px; height:169px;transition: all 1s ease 0s;}
.suofang:hover{-webkit-transform:scale(2,2);-moz-transform:scale(2,2);-o-transform:scale(2,2);}
</style>
</head>

<body><div class="box">
<a href="#" class="suofang" style="background:url(suo.jpg) no-repeat;"></a>
</div>
</body>
</html>

posted @ 2015-06-26 20:19  tinyphp  Views(8210)  Comments(0)    收藏  举报