3d-эффект картинки

Как то делал такое средствами SCSS.

Jsfiddle ссылка тут

HTML код

<div class='reflection-container'>
  <a class='reflection-grid-cell reflection-grid-cell-1' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-2' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-3' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-4' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-5' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-6' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-7' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-8' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-9' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-10' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-11' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-12' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-13' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-14' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-15' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-16' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-17' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-18' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-19' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-20' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-21' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-22' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-23' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-24' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-25' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-26' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-27' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-28' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-29' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-30' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-31' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-32' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-33' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-34' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-35' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-36' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-37' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-38' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-39' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-40' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-41' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-42' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-43' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-44' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-45' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-46' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-47' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-48' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-49' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-50' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-51' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-52' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-53' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-54' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-55' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-56' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-57' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-58' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-59' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-60' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-61' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-62' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-63' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-64' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-65' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-66' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-67' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-68' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-69' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-70' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-71' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-72' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-73' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-74' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-75' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-76' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-77' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-78' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-79' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-80' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-81' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-82' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-83' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-84' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-85' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-86' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-87' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-88' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-89' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-90' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-91' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-92' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-93' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-94' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-95' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-96' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-97' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-98' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-99' href='#'></a>
  <a class='reflection-grid-cell reflection-grid-cell-100' href='#'></a>
  <div class='reflection-content'></div>
</div>

SCSS код

.reflection-container{
  position:relative;
  display:inline-block;
  vertical-align:middle;
  transform-style: preserve-3d;
  perspective: 1000px;
  &:before{
    content:'Hover me ➜';
    color:#fff;
    position:absolute;
    left:-1rem;
    top:50%;
    font-size:6vh;
    transform:translateX(-100%) translateY(-50%);
  }
  .reflection-content{
    height:80vh;
    width:80vh;
    background:#000 url(https://unsplash.it/800/800/?random);
    background-size:cover;
    background-position:center;
    transform:rotateX(0) rotateY(0);
    pointer-events:none;
    transition:100ms linear transform;
    overflow:hidden;
    &:before{
      content:'';
      position:absolute;
      width:200%;
      height:200%;
      left:-50%;
      top:-50%;
      background: linear-gradient(rgba(255,255,255,0.2),rgba(0,0,0,0.2));
    }
  }
  .reflection-grid-cell{
    position:absolute;
    z-index: 1;
    width:10%;
    height:10%;
  }
  @for $r from 1 to 11{ 
    @for $c from 1 to 11 {
      .reflection-grid-cell-#{( ($r*10) + $c - 10)}{
        top:($r*10%)-10%;
        left:($c*10%)-10%;
      }
      .reflection-grid-cell-#{( ($r*10) + $c - 10)}:hover ~ .reflection-content{
        transform:rotateX((($r*-5)+25deg)) rotateY((-25deg+($c*5)));
        &:before{
          transform:translateY(25-(5%*$r));
        }
      }
    }
  }
} 

$(document).ready(function() { 
   $("#image").tilt({ 
    speed: 500, 
    perspective: 1000, 
     glare: true, 
     maxGlare: 0.10, 
     reset: false 
  }); 
});

#background, #foreground { 
    position: absolute; 
    transform-style: preserve-3d; 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
} 
 
#image { 
  position: absolute; 
  transform-style: preserve-3d; 
  border: 0px solid red; 
  width: 500px; 
  height: 859px; 
   
} 
 
#foreground { 
  transform: translateZ(20px); 
} 
 
.wrapper { 
  position: relative; 
  width: 500px; 
  margin: 0 auto; 
   transform-style: preserve-3d; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src='https://tools.cstudios.ninja/tilt.jquery.js'></script> 
 
<div class="wrapper" > 
  <span id="image" data-tilt> 
    <img id="background" src="https://vignette.wikia.nocookie.net/scroogemcduck/images/3/31/DT2017_Scrooge_McDuck.png/revision/latest?cb=20171203141439"> 
  </span> 
</div>