Skip to content

Instantly share code, notes, and snippets.

@shallaa
Created September 21, 2017 22:32
Show Gist options
  • Save shallaa/ff3cbb6e7f158245a430b9d13f43e036 to your computer and use it in GitHub Desktop.
Save shallaa/ff3cbb6e7f158245a430b9d13f43e036 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
@keyframes spin{
to{transform:rotateX(360deg);}
}
html, body{height: 100%;}
body{perspective:800px;background:#404040}
.test{
width:300px;height:300px;background:#aaa;
position:absolute;margin-left:-150px;margin-top:-150px;
animation:spin 4s linear infinite;
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="test" style="left:25%;top:50%;transform-origin:50% 0%">
</div>
<div class="test" style="left:50%;top:50%;transform-origin:50% 50%"></div>
<div class="test" style="left:75%;top:50%;transform-origin:50% 100%"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment