title: 3d effect on image with css
body: <p>I have this image in PSD and I should create this in css
  <a href="https://i.stack.imgur.com/8CHE9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8CHE9.png" alt="enter image description here"></a></p>
  
  <p>but i do not know how can do this.
  this is html code:</p>
  
  <pre><code> &lt;div class="wrapper"&gt;
                      &lt;img src="assets/img/index.header.png" alt=""&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>.wrapper{
    transform-style: preserve-3d;
    transform: rotateX(-40deg) rotateY(32deg);
  perspective: 1000px;
  }
  img{
      width:882px;
        height: 561px;
        box-shadow: rem(-20) rem(20) rem(80) 0 rgba(0, 0, 0, 0.15),
                    rem(-20) rem(20) rem(80) 0  rgba(0, 0, 0, 0.15) ;
     transform: rotateX( 90deg)  translateZ(1em);
  }
  </code></pre>
  
  <p>but result it is not what I want.
  I want add <strong>box-shadow</strong> and <strong>3d effect</strong> exactly like image.
  this is original picture
  <a href="https://i.stack.imgur.com/HLtpD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HLtpD.png" alt="enter image description here"></a></p>