Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you scale a element without affecting the border-radius?

Tags:

css

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

like image 962
p0larBoy Avatar asked Apr 16 '11 12:04

p0larBoy


1 Answers

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>
like image 197
meagar Avatar answered Sep 21 '22 01:09

meagar