0

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

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.