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

常见的css3缩放效果

你可能感兴趣的:(css3)