Simple 3D plane hover effect using CSS3 transform
A Pen by Rian Ariona on CodePen.
Simple 3D plane hover effect using CSS3 transform
A Pen by Rian Ariona on CodePen.
<div class="card"> | |
<div class="card-content"> | |
<h1>Just hover around</h1> | |
<p><small>by <a href="http://ariona.net" target="_blank">Ariona, Rian</a></small></p> | |
<p class="related"><strong>See also: </strong><a href="http://codepen.io/ariona/pen/LEEadb" target="_blank">Animated highlight text</a></p> | |
</div> | |
</div> |
// why it doesn't work on firefox? | |
var card = $(".card"); | |
$(document).on("mousemove",function(e) { | |
var ax = -($(window).innerWidth()/2- e.pageX)/20; | |
var ay = ($(window).innerHeight()/2- e.pageY)/10; | |
card.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)"); | |
}); |
@import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700); | |
body{ | |
background: #edf2f4; | |
perspective: 1000px; | |
transform-style: preserve-3d; | |
display: flex; | |
height: 100vh; | |
font-family: "Playfair Display",georgia,serif; | |
} | |
.card{ | |
pointer-events: none; | |
transform: translateZ(0); | |
padding: 30px; | |
background: white; | |
border-radius: 5px; | |
width: 400px; | |
height: 200px; | |
margin: auto; | |
transform-style: preserve-3d; | |
backface-visibility: hidden; | |
display: flex; | |
box-shadow: 0 0 5px rgba(0,0,0,.1); | |
position: relative; | |
&:after{ | |
content:" "; | |
position: absolute; | |
width: 100%; | |
height: 10px; | |
border-radius: 50%; | |
left:0; | |
bottom:-50px; | |
box-shadow: 0 30px 20px rgba(0,0,0,.3); | |
} | |
.card-content{ | |
margin: auto; | |
text-align:center; | |
transform-style: preserve-3d; | |
} | |
h1{ | |
transform: translateZ(100px); | |
} | |
p{ | |
transform: translateZ(50px); | |
display: block; | |
&.related{ | |
transform: translateZ(80px); | |
font-style: italic; | |
} | |
} | |
a{ | |
color:#69c6b8; | |
pointer-events: auto; | |
} | |
} |