Как вы масштабируете элемент, не влияя на радиус границы?

Question

В настоящее время мое преобразование webkit для масштабирования будет влиять на радиус границы, делая его искаженным. Есть ли какой-нибудь хак css3, который позволит мне сохранить закругленные углы? Пример * +1003 *

Answer 1

Просто вручную управляйте шириной и высотой, а не используя масштабирование:

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

Answer 2

Вы можете поместить свой элемент интереса в div.Затем вы можете переместить css border * из вашего элемента во внешний div.Затем вы можете применить масштабирующее ** преобразование к исходному элементу;граница (теперь во внешнем div) не должна быть затронута.

* (и, возможно, другие атрибуты, такие как абсолютное позиционирование, определение размера и т. д.)

** (любые дальнейшие преобразования, такие какповороты или 3d-преобразования, которые затем могут быть применены отдельно к внешнему элементу)