Skip to content

Instantly share code, notes, and snippets.

@benoitboucart

benoitboucart/dabblet.css

Last active December 15, 2016 18:59
Show Gist options
  • Save benoitboucart/5231260 to your computer and use it in GitHub Desktop.
Save benoitboucart/5231260 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 3D Hover effects [1]
Raw
dabblet.css
/**
* CSS3 3D Hover effects [1]
* See tutorial on http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {
background: #f06;
background: linear-gradient(45deg, #f06, red);
min-height: 100%;
}
.sm {text-align: center;margin: 5em 0 0 0;padding:0;list-style:none;}
.sm a {;
background: url(http://webbb.be/themes/webbb/images/sm3d.png) no-repeat #2e8198;
background-position: 0 0;
height: 27px; width: 27px;
display: inline-block;
transform: perspective(1000);
transform-style: preserve-3d;
transition: all 400ms ease;
}
.sm a:hover {
background-position: 0 -27px;
transform: rotate(-90deg);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul class="sm">
<li><a href="https://twitter.com/benoitboucart" target="_blank"></a></li>
</ul>
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