Как достичь “глубины” с помощью 3D-transform CSS

#html #css #css3 #html5 #вёрстка

Я пытаюсь создать «перспективный макет» с использованием CSS. Существует множество
учебников о том, как добиться этого с помощью 3D-слоев в Photoshop, но я бы хотел сделать
это с помощью CSS. Вот пример того, чего я пытаюсь получить:
   

А вот код (с использованием необработанного изображения https://i.imgur.com/foDEYpB.png):  



#perspective {
  width: 400px;
  height: 500px;
  position: absolute;
  background-image: url("https://i.imgur.com/foDEYpB.png");
  background-repeat: no-repeat;
  background-size: cover;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -250px;
  transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg);
  box-shadow: -15px 15px 20px rgba(0, 0, 0, 0.5);
}





Я довольно близок к решению, но не уверен, как добиться визуального представления
«глубины» или «высоты». Это когда изображение выглядит приподнятым.  Кругом обведено
характерное место, упомянутой «глубины», где изображение повторяется по сторонам:   


    

Ответы

Ответ 1

Попробуйте добавить три типа изображений для создания 3D-эффектов. Используйте свойство
transform с вращением для изображений, чтобы получить желаемый результат.   

Ссылка на codepen. 



.perspective {
    position: relative;
    width: 400px;
    height: 500px;
    transform-style: preserve-3d;
    transition: all 500ms ease-in;
    transform: rotateY(20deg) rotateX(60deg) rotateZ(-10deg);
    transform: rotateY(15deg) rotateX(50deg) rotateZ(-15deg);
    box-shadow: -40px 80px 80px -10px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    margin-right: 30px;
    display: inline-block;
    margin-left: 30%;
}

.perspective img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 400px;
    height: 500px;
    transform: translateZ(16px);
}

.bottom,
.left {
    position: absolute;
    width: 400px;
    height: 500px;
    display: block;
    transition: all 1s linear;
    overflow: hidden;
    border-radius: 3px;
    transform: translateZ(16px);
}

.left {
    transform: rotateY(270deg) translateX(-1px);
    transform-origin: center left;
    width: 18px;
}

.bottom {
    transform: rotateX(90deg) translateY(15px) translateZ(-480px);
    transform-origin: bottom center;
    height: 18px;
}

.bottom img {
    transform: rotateX(180deg);
    width: 100%;
    height: 500px;
    left: 0px;
}