CSS로 원근감있는 그림자를 만드는 방법은 무엇입니까?

Question

CSS의 box-shadow 속성에 대해 알고 있지만이 요소 바로 뒤에 벽에 투영 된 그림자가 생성됩니다. 나는이 같은 땅에 서있는 요소처럼 보이는 그림자를 만들어야합니다

div { 
 
    display: inline-block; 
 
    height: 150px; 
 
    width: 150px; 
 
    background: url(//placehold.it/150x150); 
 
    margin-left: 20px; 
 
    box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.75); 
 
}

<div></div> 
 
<div></div>

Answer 1

에게 당신을 :

이것은 내가 지금까지 무엇을 가지고 요소 자체에 box-shadow 속성을 사용하지 않고도 pseudo 요소 ::before에이 작업을 수행 할 수 있습니다.

• transform: skewX(60deg);는
• height: 10%;이 땅에 투영처럼 보이게 측면에서오고는 광원처럼 보이게됩니다
• width: 70%과 실제 요소를
• 그리고시를 숨 깁니다 일부 위치 마지막 box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75);은 그림자를 생성합니다.

물론 이전 버전의 브라우저에서는 공급 업체 접두어를 사용해야합니다.

div { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 150px; 
 
    width: 150px; 
 
    background: url(//placehold.it/150x150); 
 
    margin-left: 30px; 
 
} 
 
div::before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    bottom: 0; 
 
    left: 15px; 
 
    height: 10%; 
 
    width: 70%; 
 
    box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75); 
 
    transform: skewX(60deg); 
 
}

<div></div> 
 
<div></div>