Skip to content

Instantly share code, notes, and snippets.

@leuchtetgruen
Created June 7, 2012 09:47
Show Gist options
  • Save leuchtetgruen/2887915 to your computer and use it in GitHub Desktop.
Save leuchtetgruen/2887915 to your computer and use it in GitHub Desktop.
Untitled
@keyframes rotate {
0% { transform: rotateY(0deg) }
100% { transform: rotateY(180deg) }
}
img {
border : 1px solid lightgray;
perspective: 1000;
-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
img.animating {
animation: rotate 2s infinite;
animation-direction: alternate;
}
<img id="3d" src="http://www.jd-promotion-shop.de/UserFiles/images/visitenkarte_premium.jpg" />
<a href="#"
onclick="document.getElementById('3d').className='animating';">Rotate the card</a>
{"view":"separate","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