CSS HoverBoard 3D
The HoverBoard 3D effect, created by Ryan McLaughlin, replicates Pranav Pramod‘s version which you can see here.
Click on the image above to view Ryan’s demo!
Check out the code below:
HTML
<div id="container">
Hello there.
<div id="hover-flip">
Peek-a-boo!
<p>Hover meh</p>
</div>
</div>
|
CSS
body {
background: #555;
color: #555;
font-family: 'helvetica neue', arial, sans-serif;
}
#container {
background: -webkit-linear-gradient(top, #fff, #eee);
font-weight: bold;
margin: 100px;
padding: 20px 0 55px;
position: relative;
text-align: center;
width: 300px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
#hover-flip {
border-top: 1px solid #DDD;
bottom: 0;
color: #df3e7b;
font-size: 14px;
line-height: 40px;
position: absolute;
width: 100%;
-webkit-perspective: 350;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
#hover-flip:hover {
background: #ddd;
box-shadow: inset 0 20px 5px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,.05);
-webkit-transition: all .2s ease-in-out;
}
#hover-flip p {
background: #fff;
color: #009EE0;
margin-top: -40px;
position: relative;
-webkit-font-smoothing: antialiased;
-webkit-transform-origin: top;
-webkit-transition: all .2s ease-in-out;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
#hover-flip:hover p {
background: #bbb;
color: transparent;
-webkit-transform: rotateX(108deg);
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
|
Pranav’s sample will give you an idea about the possible applications of this CSS effect. Have fun with this one!
0
511
