.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.