Многократные преобразования CSS3: translate () и scale () - PullRequest
Новая
       9

Многократные преобразования CSS3: translate () и scale ()

0 голосов
/ 11 июня 2018

Я узнал, как применить несколько преобразований с помощью Как применить несколько преобразований в CSS? , но мне интересно, как я могу управлять ими немного лучше. 

#box {
  width: 100px;
  height: 100px;
  font-family: "Arial";
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: red;
  border-radius: 25%;
  transition: 0.5s ease-in-out;
}
            
#box:hover {
  transform: scale(2, 2) translate(25px, 25px);
}
<div id="box">Text</div>

Анимация начинается с scale() до того, как начинает действовать translate(). Как ни странно, я не могу поменять translate()и scale() вокруг, поскольку он будет масштабироваться, но не будет переводиться, когда я это сделаю.

Как мне изменить это так, чтобы верхняя и левая части div не двигались вверх и влево?Я хочу, чтобы оба преобразования начинались вместе, чтобы вы не видели, как div движется вверх и влево для начала.

1 Ответ

0 голосов
/ 11 июня 2018

Как мне изменить это так, чтобы верх и левый угол div не двигались вверх и влево?

Вы перестали перемещать его в первую очередь ... и укажите, где выхотите, чтобы источником преобразования были: 

#box {
  width: 100px;
  height: 100px;
  font-family: "Arial";
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: red;
  border-radius: 25%;
  transition: 0.5s ease-in-out;
  transform-origin: top left; /* add this in */
}
            
#box:hover {
  transform: scale(2, 2); /* no translate here */
}
<div id="box">Text</div>
...