Использование css transform

Question

Возможно ли при использовании transform: scaleY(1.2); сделать так, чтобы содержимое трансформируемого блока не растягивалось вместе с ним?

Answer 1

Можно делать scale на псевдоэлемент. Или создать доп элемент и работать с ним, чтобы он был под контентом.

body {
  padding: 30px
}

.block {
  position: relative;
  padding: 15px;
}

.block:before {
  content: '';
  border: 2px solid black;
  padding: 15px;
  width: 200px;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  
}


.block:hover:before {
  transform: scaleY(1.2);
}

<div class="block">
  <div class="content">
  test content 
  </div>
</div>

БЛОГ НА HUSL

Использование css transform

Ответы (1 шт):