Skip to content

Instantly share code, notes, and snippets.

@jcsrb
Created June 5, 2012 09:38
Show Gist options
  • Save jcsrb/2873965 to your computer and use it in GitHub Desktop.
Save jcsrb/2873965 to your computer and use it in GitHub Desktop.
/**
* rotate card (Chrome bug http://code.google.com/p/chromium/issues/detail?id=97458 )
*/
.id-card {
width: 200px;
height: 200px;
padding: 5%;
border-radius: 50%;
box-sizing: border-box;
background: plum;
transition: transform 1s ease-in-out;
transform: translateZ(0)
/* should be all smooth... not in Chrome :( */
}
.id-card:hover {
transform: translateZ(0) rotate(30deg);
}
<!-- content to be placed inside <body>…</body> -->
<div class="id-card">
<h1>name</h1>
<div>location</div>
</div>
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment