Skip to content

Instantly share code, notes, and snippets.

@mutukrish

mutukrish/index.html

Created October 7, 2012 09:41
Show Gist options
  • Save mutukrish/3847676 to your computer and use it in GitHub Desktop.
Save mutukrish/3847676 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<body>
<div id="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
<div class="face5">5</div>
<div class="face6">6</div>
</div>
</body>
Raw
style.css
body{
background:#353535;
margin:100px 500px;
overflow:hidden;
}
#spinner div {
position: absolute;
width: 120px;
height: 120px;
border: 1px solid #ccc;
background: rgba(255,255,255,0.8);
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
text-align: center;
line-height: 120px;
font-size: 100px; }
#spinner .face1 {
-webkit-transform: translateZ(60px);
-moz-transform: translateZ(60px);
-ms-transform: translateZ(60px);
transform: translateZ(60px);
}
#spinner .face2 {
-webkit-transform: rotateY(90deg) translateZ(60px);
-moz-transform: rotateY(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) translateZ(60px);
transform: rotateY(90deg) translateZ(60px);
}
#spinner .face3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
-moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}
#spinner .face4 {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
-moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
}
#spinner .face5 {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
}
#spinner .face6 {
-webkit-transform: rotateX(-90deg) translateZ(60px);
-moz-transform: rotateX(-90deg) translateZ(60px);
-ms-transform: rotateX(-90deg) translateZ(60px);
transform: rotateX(-90deg) translateZ(60px);
}
@-webkit-keyframes spincube {
from,to { }
16% { -webkit-transform: rotateY(-90deg); }
33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
50% { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
66% { -webkit-transform: rotateY(90deg) rotateX(90deg); }
83% { -webkit-transform: rotateX(90deg); } }
#spinner {
-webkit-animation-name: spincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 60px 60px 0; }
@-moz-keyframes spincube {
from,to { }
16% { -moz-transform: rotateY(-90deg); }
33% { -moz-transform: rotateY(-90deg) rotateZ(90deg); }
50% { -moz-transform: rotateY(180deg) rotateZ(90deg); }
66% { -moz-transform: rotateY(90deg) rotateX(90deg); }
83% { -moz-transform: rotateX(90deg); } }
#spinner {
-moz-animation-name: spincube;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 12s;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 60px 60px 0; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment