Помогите трансформировать фигуру CSS JS HTML

Question

Помогите пожалуйста трансформировать прямоугольник в это

https://disk.yandex.ru/i/X9QeRStKopUQ-g Онлайн редакторами пытался...

Прямоугольник это просто div, реализовать через css, js, при наведении через hover

Answer 1

.transformation{
  display: flex;
  height: 120px;  
  transition: all .3s ease;
}
.transformation:hover{
  transform: perspective(100px) translateZ(-40px);
}
.transformation__item{
  background-color: #cda;
  width: 20%;
  background: repeating-linear-gradient(to bottom, black 0, black 5px, yellow 5px, yellow 10px);
  transition: inherit;
}
.transformation__item--left{
  transform-origin: right center;  
}
.transformation:hover .transformation__item--left{
  transform: perspective(100px) rotateY(10deg);
}
.transformation__item--center{
  width: 60%;
}
.transformation__item--right{
  transform-origin: left center;  
}
.transformation:hover .transformation__item--right{
  transform: perspective(100px) rotateY(-10deg);
}

<div class="transformation">
  <div class="transformation__item transformation__item--left"></div>
  <div class="transformation__item transformation__item--center"></div>
  <div class="transformation__item transformation__item--right"></div>
</div>

БЛОГ НА HUSL

Помогите трансформировать фигуру CSS JS HTML

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