Топ дня: OZZY

314754576, и к немy css

.stage {
margin: 100px 50px 50px 50px;
}

@-webkit-keyframes spincube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
16% { -webkit-transform: rotateY(-90deg); }
33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
50% { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }
66% { -webkit-transform: rotateY(-270deg) rotateX(90deg); }
83% { -webkit-transform: rotateX(90deg); }
}

@keyframes spincube {
from,to {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
33% {
-moz-transform: rotateY(-90deg) rotateZ(90deg);
-ms-transform: rotateY(-90deg) rotateZ(90deg);
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
-moz-transform: rotateY(-180deg) rotateZ(90deg);
-ms-transform: rotateY(-180deg) rotateZ(90deg);
transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
-moz-transform: rotateY(-270deg) rotateX(90deg);
-ms-transform: rotateY(-270deg) rotateX(90deg);
transform: rotateY(-270deg) rotateX(90deg);
}
83% {
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}

.cubespinner {
-webkit-animation-name: spincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;

animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

-webkit-transform-origin: 60px 60px 0;
-moz-transform-origin: 60px 60px 0;
-ms-transform-origin: 60px 60px 0;
transform-origin: 60px 60px 0;
}

.cubespinner div {
position: absolute;
width: 300px;
height: 300px;
background: rgba(255,255,255,0.9);
line-height:200px;
text-align: center;
font-size: 50px;
}

.cubespinner .face1 {
color: CadetBlue;
-webkit-transform: translateZ(60px);
-moz-transform: translateZ(60px);
-ms-transform: translateZ(60px);
transform: translateZ(60px);
}
.cubespinner .face2 {
color: ForestGreen;
-webkit-transform: rotateY(90deg) translateZ(60px);
-moz-transform: rotateY(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) translateZ(60px);
transform: rotateY(90deg) translateZ(60px);
}
.cubespinner .face3 {
color: blue;
-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);
}
.cubespinner .face4 {
color: orange;
-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);
}
.cubespinner .face5 {
color: red;
-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);
}
.cubespinner .face6 {
color: DarkSlateGray;
-webkit-transform: rotateX(-90deg) translateZ(60px);
-moz-transform: rotateX(-90deg) translateZ(60px);
-ms-transform: rotateX(-90deg) translateZ(60px);
transform: rotateX(-90deg) translateZ(60px);
}

Я далеко живу