.reflection-container
  -(1..100).each do |cell|
    %a{:class => "reflection-grid-cell reflection-grid-cell-#{cell}", "href" => "#"}
  .reflection-content
View Compiled
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
html{
  height:100%;
}
body{
  text-align:center;
  height:100%;
    background-color: #2C4159;
  font-family:'Open Sans', sans-serif;
  &:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
  }
}
.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));
        }
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.