Вращение элементов css

Question

Вот макет слайдера

Вот html

       <div class="slider">
            <div class="slide slide_prev">
                <img src="img/slide_01.png" alt="" />
            </div>
            <div class="slide slide_current">
                <img src="img/slide_01.png" alt="" />
            </div>
            <div class="slide slide_next">
                <img src="img/slide_01.png" alt="" />
            </div>
        </div>

Нужно чтобы картинки предыдущего и следующего слайдов были утоплены и повернуты как на макете. Как это сделать средствами css?

Answer 1

Приблизительно так

* {
  box-sizing: border-box;
}

body {
  background-color: #001212;
}

.slider {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  perspective: 1200px;
  max-width: 960px;
  margin: 0 auto;
}

.slider__item {
  max-width: 33.333%;
  width: 33.333%
}

.slider__item:nth-of-type(1) {
  transform: skewY(-8deg) rotateY(-30deg) scale(.9) translateY(30px);
}

.slider__item:nth-of-type(3) {
  transform: skewY(8deg) rotateY(30deg) scale(.9) translateY(30px);
}

.slider__img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div class="slider__item"><img class="slider__img" src="https://i.ibb.co/GWFRQBj/phone.jpg" alt=""></div>
  <div class="slider__item"><img class="slider__img" src="https://i.ibb.co/GWFRQBj/phone.jpg" alt=""></div>
  <div class="slider__item"><img class="slider__img" src="https://i.ibb.co/GWFRQBj/phone.jpg" alt=""></div>
</div>

БЛОГ НА HUSL

Вращение элементов css

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