Currently my webkit transform for scaling would affect the border radius, making it distorted. Is there any css3 hack that will allow me to preserve the rounded corners? Example
Just manually manipulate the width and height, rather than using scaling:
#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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With