DIV с перспективой и 3d тенями - PullRequest
Новая
       27

DIV с перспективой и 3d тенями

0 голосов
/ 26 сентября 2019

Я создаю демонстрационную коробку с маленькой 3d тенью позади нее.У меня это работает, но теперь я хочу, чтобы оно было отзывчивым.Поэтому, когда вы помещаете в него другое изображение (или уменьшаете размер div), тень также будет хорошо держаться до конца.Но я застрял в этой части, я не понимаю, так что, может быть, кто-то из вас, ребята, может помочь мне с этим? 

.screenshot {
  position : absolute;
  top : 10%;
  right : 0;
  -webkit-perspective : 1000px;
  -moz-perspective : 1000px;
  persepctive : 1000px;
  max-width : 100%;
}

.screenshot img {
  float : left;
  transform : rotateY(-40deg);
  width : calc(100% - 60px);
}

.screenshot:after {
  position : absolute;
  top : -10%;
  content : "";
  margin : 0 0 0 -34px;
  background-color : grey;
  transform : rotateY(40deg);
  width : 40px;
  height : calc(100% + 20.1%);
}
<div class="screenshot">
<img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg" alt=""> 
</div>

1 Ответ

0 голосов
/ 26 сентября 2019

Вы можете использовать этот код 

body {
            margin: 0;
        }   
        .screenshot {
            position : absolute;
            top : 10%;
            right : 0;
            -webkit-perspective : 1000px;
            -moz-perspective : 1000px;
            persepctive : 1000px;
            max-width : 100%;
        }
        .screenshot img {
            float : left;
            transform : rotateY(-40deg);
            width : calc(100% - 60px);
        }
        .screenshot:after {
            position : absolute;
            top : -10%;
            content : "";
            margin : 0 0 0 -34px;
            background-color : grey;
            transform : rotateY(40deg);
            width : 40px;
            height : calc(100% + 20.1%);
        }
        @media (max-width: 575px){
            .screenshot:after {
                position: absolute;
                top: -10%;
                content: "";
                margin: 0 0 0 -33px;
                background-color: grey;
                transform: rotateY(40deg);
                width: 32px;
                height: calc(100% + 20.1%);
            }
        }
        @media (max-width: 480px){
            .screenshot:after {
                position: absolute;
                top: -6%;
                content: "";
                margin: 0 0 0 -35px;
                background-color: grey;
                transform: rotateY(40deg);
                width: 25px;
                height: calc(100% + 12.1%);
            }
        }
        @media (max-width: 320px){
            .screenshot:after {
                position: absolute;
                top: -4%;
                content: "";
                margin: 0 0 0 -28px;
                background-color: grey;
                transform: rotateY(40deg);
                width: 25px;
                height: calc(100% + 8.1%);
            }
        }
<div class="screenshot">
        <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg" alt=""> 
    </div>
...