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