css – 如何在不影响border-radius的情况下缩放元素？

目前我的webkit变换用于缩放将影响边界半径,使其失真.是否有任何 css3 hack可以让我保留圆角？
Example

解决方法

只需手动操作宽度和高度,而不是使用缩放：

#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>