CSS - transform: scale () независимо от размера элемента - PullRequest
Новая
       7

CSS - transform: scale () независимо от размера элемента

0 голосов
/ 10 декабря 2018

Есть ли способ применить transform: scale() к элементу (или к чему-то подобному, хотя в идеале он должен быть в состоянии безопасно анимироваться), который заставил бы элемент казаться больше, однако «игнорировал» размер элемента (очевидно, этоне совсем то, что я имею в виду, продолжайте читать).

Здесь является примером того, что я имею в виду.

По сути, идея состоит в том, чтобы сделать 2 элемента разного размера отображается для масштабирования таким же образом, несмотря на то, что это 2 разных размера.Следует отметить, что элементы не будут иметь фиксированную ширину и будут наследовать размер своего контейнера (ширина которого также не определена).

1 Ответ

0 голосов
/ 10 декабря 2018

Обновление

Благодаря @TemaniAfif решение может быть дополнительно оптимизировано путем манипулирования левым и правым полем вместо ширины. 

.small {
  width: 100px;
  margin: 10px;
  background-color: #1abc9c;
}

.large {
  width: 900px;
  margin: 10px;
  background-color: #3498db;
}

.target {
  background-color: inherit;
}

.target:hover {
  margin: 0 -12px;
  transform: scaleY(1.2);
  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
}
<div class="small">
  <div class="target">Small</div>
</div>
<div class="large">
  <div class="target">Large</div>
</div>

Оригинальный ответ

Функция scale изменяет размеры элемента путем умножения, но вам необходимо постоянное увеличение по оси x варианта.Вместо этого используйте scale, используя calc по ширине прокси-элемента (.target), чтобы добавить постоянный пиксель, когда элемент должен быть увеличен.Увеличивая ширину, положение элемента также нуждается в смещении, чтобы увеличить его влево, поэтому установите left на отрицательное число, которое составляет половину от общего увеличения.Поскольку высоты двух элементов одинаковы, можно использовать scaleY для их масштабирования. 

.small {
  width: 100px;
  margin: 10px;
  background-color: #1abc9c;
}

.large {
  width: 900px;
  margin: 10px;
  background-color: #3498db;
}

.target {
  position: relative;
  left: 0;
  width: 100%;
  background-color: inherit;
}

.target:hover {
  left: -12px;
  width: calc(100% + 24px);
  transform: scaleY(1.2);
  transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, width 0.3s ease-in-out;
}
<div class="small">
  <div class="target">Small</div>
</div>
<div class="large">
  <div class="target">Large</div>
</div>
...