Skip to content

Instantly share code, notes, and snippets.

@shallaa
Created September 21, 2017 22:31
Show Gist options
  • Save shallaa/43010c3799ed23a4993a59f0fe62fb83 to your computer and use it in GitHub Desktop.
Save shallaa/43010c3799ed23a4993a59f0fe62fb83 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
@keyframes origin{
0%{perspective-origin:0% 50%}
50%{perspective-origin:100% 50%}
100%{perspective-origin:0% 50%}
}
@keyframes spin{
100%{transform:rotateX(360deg)}
}
html, body{height: 100%;}
body{
perspective:600px;background:#404040;
animation:origin 10s linear infinite
}
.test{
width:500px;height:500px;background:#aaa;
position:absolute;left:50%;top:50%;
margin-left:-250px;margin-top:-250px;
animation:spin 30s linear infinite;
}
</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