Skip to content

Instantly share code, notes, and snippets.

@sidepodcast
Created August 23, 2012 12:41
Show Gist options
  • Save sidepodcast/3436286 to your computer and use it in GitHub Desktop.
Save sidepodcast/3436286 to your computer and use it in GitHub Desktop.
3D rotate (webkit sample)
<!doctype html>
<head>
<meta charset=utf-8>
<title>3D spin</title>
<style>
/*
* nb: -webkit only for brevity. tested in chrome 21
*/
body {
-webkit-perspective: 800px;
}
.panel {
border: 8px dashed #777;
border-radius: 50%;
height: 300px;
line-height: 290px;
margin: auto;
text-align: center;
width: 300px;
-webkit-animation: rotate 5s infinite ease-in-out;
}
@-webkit-keyframes rotate {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(360deg); }
}
</style>
<body>
<div class=panel>Like a record baby!</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment