常见的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>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM