目前我的 Webkit 变换缩放会影响边框半径,使其失真。有没有 CSS3 的技巧可以让我保留圆角?示例
不要使用缩放,手动调整宽度和高度:
#pan {
width:500px;
height:500px;
position:relative;
background:#aaa;
}
#rec {
width:100px;
height:100px;
position:absolute;
top:250px;
left:250px;
background:#fff;
-webkit-transition:500ms cubic-bezier(0.785, 0.135, 0.000, 0.940)
}
#rec:hover{
/*-webkit-transform:scale(3.5,1);*/
width:300px;
left:150px;
-webkit-transition:500ms linear;
-webkit-border-radius:35px;
}
<div id="pan">
<div id="rec"></div>
</div>