Skip to content

Instantly share code, notes, and snippets.

@pcwalton
Created February 14, 2018 21:05
Show Gist options
  • Save pcwalton/07bd4ae28e953553c20fda0dfa257334 to your computer and use it in GitHub Desktop.
Save pcwalton/07bd4ae28e953553c20fda0dfa257334 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
perspective: 256px;
}
.test {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 256px;
height: 256px;
margin: auto;
background: slateblue;
border-radius: 64px / 32px;
animation: 20s linear 0s infinite test-anim;
}
@keyframes test-anim {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(720deg); }
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment