Элемент перескакивает при использовании свойства преобразования и перехода в CSS

Question

Код ниже:

p {
  display: inline-block;
  background-color: #f00;
  color: #fff;
  margin: 100px 200px;
  padding: 20px;
  transition: transform 1s;
}

p:active {
  transform-origin: top left;
  transform: scale(2);
}

<p>Sheeeet</p>

Итак, когда я щелкнул этот элемент, все пошло так, как ожидалось, но когда я отпустил мышь, элемент переместился в другую позицию, как будто его не было transform-origin в результате. Можно ли это исправить?

Answer 1

У вас есть 2 способа решить эту проблему:

1. Добавьте transform-origin:top left в тег p.

ИЛИ

Удалить transform-origin:top left в классе active.

p {
  display: inline-block;
  background-color: #f00;
  color: #fff;
  margin: 100px 200px;
  padding: 20px;
  transition: transform 1s;
  transform-origin: top left;
}

p:active {
  transform-origin: top left;
  transform: scale(2);
}

<p>Sheeeet</p>