CSS
html,body {
height: 100%;
width: 100%;
background: #7AB952;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.stage {
width: 600px;
height: 100%;
position: relative;
perspective: 1600px;
perspective-origin: 50% -100px;
animation: introduceCube 1.5s ease-out;
}
.stage .cube {
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}
.stage .cube-positioning {
width: 100%;
height: 100%;
transform-style: preserve-3d;
position: absolute;
}
.stage figure {
display: block;
width: 300px;
height: 300px;
left: 150px;
top: 150px;
background-color: #64a43a;
background-image: url(http://hop.ie/cube/minecraft/images/mc_side.png);
background-size: 100%;
position: absolute;
backface-visibility: hidden;
overflow: hidden;
-webkit-box-reflect: below 0 -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(60%,transparent),to(RGBA(0,0,0,0.25)));
}
.stage figure:before,.stage figure:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
.stage figure:before {
background: -webkit-gradient(radial,0% 0%,0,0% 0%,100,color-stop(0%,rgba(0,0,0,0.5)),color-stop(100%,#000));
background: -webkit-radial-gradient(top left,rgba(0,0,0,0.5),#000);
background: -moz-radial-gradient(top left,rgba(0,0,0,0.5),#000);
background: -o-radial-gradient(top left,rgba(0,0,0,0.5),#000);
background: radial-gradient(top left,rgba(0,0,0,0.5),#000);
z-index: 10;
}
.stage figure:after {
background: -webkit-gradient(radial,100% 0%,0,100% 0%,100,color-stop(0%,rgba(0,0,0,0.5)),color-stop(100%,#000));
background: -webkit-radial-gradient(top right,rgba(0,0,0,0.5),#000);
background: -moz-radial-gradient(top right,rgba(0,0,0,0.5),#000);
background: -o-radial-gradient(top right,rgba(0,0,0,0.5),#000);
background: radial-gradient(top right,rgba(0,0,0,0.5),#000);
z-index: 10;
}
.stage .back {
-webkit-transform: rotateY(180deg) translateZ(150px);
-moz-transform: rotateY(180deg) translateZ(150px);
-ms-transform: rotateY(180deg) translateZ(150px);
-o-transform: rotateY(180deg) translateZ(150px);
transform: rotateY(180deg) translateZ(150px);
}
.stage .top {
transform: rotateX(90deg) translateZ(150px);
background-image: url(../images/mc_top.png);
-webkit-box-reflect: none;
}
.stage .top:after {
content: " ";
opacity: .5;
width: 200%;
height: 200%;
margin-left: -50%;
margin-top: -50%;
background: -webkit-gradient(radial,50% 100%,0,50% 100%,100,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,#000));
background: -webkit-radial-gradient(bottom,rgba(0,0,0,0),#000);
background: -moz-radial-gradient(bottom,rgba(0,0,0,0),#000);
background: -o-radial-gradient(bottom,rgba(0,0,0,0),#000);
background: radial-gradient(bottom,rgba(0,0,0,0),#000);
animation: rotateTop 10s infinite linear;
}
.stage .bottom {
transform: rotateX(-90deg) translateZ(150px);
box-shadow: 0 10px 100px rgba(0,0,0,0.7);
backface-visibility: visible;
background-color: rgba(0,0,0,0);
-webkit-box-reflect: none;
}
.stage .left {
transform: rotateY(-90deg) translateZ(150px);
}
.stage .left:before {
animation: leftShading1 10s infinite linear;
}
.stage .left:after {
animation: leftShading2 10s infinite linear;
}
.stage .right {
transform: rotateY(90deg) translateZ(150px);
}
.stage .right:before {
animation: rightShading1 10s infinite linear;
}
.stage .right:after {
animation: rightShading2 10s infinite linear;
}
.stage .front {
transform: translateZ(150px);
}
.stage .front:before {
animation: frontShading1 10s infinite linear;
}
.stage .front:after {
animation: frontShading2 10s infinite linear;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
@-webkit-keyframes frontShading1 {
2% {
opacity: 0;
}
25% {
opacity: .9;
}
35% {
opacity: .9;
}
50% {
opacity: 0;
}
}
@-o-keyframes frontShading1 {
2% {
opacity: 0;
}
25% {
opacity: .9;
}
35% {
opacity: .9;
}
50% {
opacity: 0;
}
}
@keyframes frontShading1 {
2% {
opacity: 0;
}
25% {
opacity: .9;
}
35% {
opacity: .9;
}
50% {
opacity: 0;
}
}
@keyframes frontShading2 {
50% {
opacity: 0;
}
60% {
opacity: .9;
}
75% {
opacity: .9;
}
100% {
opacity: 0;
}
}
@keyframes backShading1 {
25% {
opacity: .9;
}
50% {
opacity: 0;
}
75% {
opacity: 0;
}
80% {
opacity: .9;
}
}
@keyframes backShading2 {
25% {
opacity: 0;
}
50% {
opacity: 0;
}
75% {
opacity: .9;
}
80% {
opacity: .9;
}
}
@keyframes leftShading1 {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
50% {
opacity: .9;
}
60% {
opacity: .9;
}
}
@keyframes leftShading2 {
0% {
opacity: .9;
}
25% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: .9;
}
}
@keyframes rightShading2 {
50% {
opacity: .9;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes rightShading1 {
10% {
opacity: .9;
}
50% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: .9;
}
}
@keyframes rotateTop {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
