Simple 3D plane hover effect using CSS3 transform
Forked from Rian Ariona's Pen 3D hover plane effect.
A Pen by Captain Anonymous on CodePen.
Created
February 19, 2015 15:20
-
-
Save anonymous/e9a28e809c792a013777 to your computer and use it in GitHub Desktop.
3D hover plane effect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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)"); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment