1

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

введите сюда описание изображения

Вот 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?

5
  • Неа, без разметки и примера - без помощи.
    – NeedH8
    10 июн 2020 в 12:58
  • а куда переместится средний и левый если нажать на правый ?
    – user355286
    10 июн 2020 в 13:10
  • Думаю в слайдере пропадет левый. Правый станет средний. А средний левым ))
    – Denis
    10 июн 2020 в 13:11
  • @ᅠhᅠ какая разница куда и кто переместится, если вопрос задан про "утопить и повернуть" ?
    – teran
    10 июн 2020 в 13:17
  • @teran какая тебе разница что и зачем я спрашиваю?
    – user355286
    10 июн 2020 в 13:23

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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