Skip to content

Instantly share code, notes, and snippets.

@juanbrujo

juanbrujo/dabblet.css

Forked from anonymous/dabblet.css
Created December 20, 2011 22:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save juanbrujo/1503684 to your computer and use it in GitHub Desktop.
Save juanbrujo/1503684 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 oblique rotation
Raw
dabblet.css
/*
CSS3 oblique rotation
© CSSLab.cl
*/
html {min-height: 100%;}
body {
background-image: linear-gradient(bottom, rgb(48,48,48) 30%, rgb(5,5,5) 47%);
}
@-webkit-keyframes girando {
0% { transform: rotate(45deg) rotate3d(1,1,0,0deg); }
25% { transform: rotate(45deg) rotate3d(1,1,0,90deg); }
50% { transform: rotate(45deg) rotate3d(1,1,0,180deg); }
75% { transform: rotate(45deg) rotate3d(1,1,0,270deg); }
100% { transform: rotate(45deg) rotate3d(1,1,0,360deg); }
}
img {
position: absolute;
top: 20%;
left: 30%;
animation: girando linear infinite 2s;
transform-style: preserve-3d;
box-shadow: 270px 270px 50px -35px rgba(0,0,0,.2);
}
img:hover {
animation-play-state: paused;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<img src="http://www.be-studios.com/tests/foto_diegol.jpg" />
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment