Skip to content

Instantly share code, notes, and snippets.

@benoitboucart

benoitboucart/dabblet.css

Last active December 15, 2015 08:29
Show Gist options
  • Save benoitboucart/5231289 to your computer and use it in GitHub Desktop.
Save benoitboucart/5231289 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 3D Hover effects [2]
Raw
dabblet.css
/**
* CSS3 3D Hover effects [2]
* See tutorial on: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%; text-align: center; margin-top: 3em;
}
.bizarlink {
color: #000; text-decoration: none; background: white;
font-size: .9em; font-family: Arial;
display: inline-block; overflow: hidden; vertical-align: top;
perspective: 600px;
perspective-origin: 50% 50%;
}
.bizarlink span {
display: block; position: relative; padding: 1.5em 3em;
transition: all 400ms ease;
transform-origin: 50% 0%;
transform-style: preserve-3d;
}
.bizarlink:hover {color: #fff; }
.bizarlink:hover span {
background: #000 color: white;
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.bizarlink span:after {
content: attr(data-content);
display: inline-block;position: absolute; left: 0; top: 0; right:0; bottom: 0;
padding: 1.5em 3em;
color: #fff; background: #000;
transform-origin: 50% 0%;
transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<a href="#" class="bizarlink"><span data-content="Hello world!">Hello world!</span></a>
<a href="#" class="bizarlink"><span data-content="Another world!">Hello world!</span></a>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment