HTML
<div class='group'>
<div class='cube' id='cube'>
<div class='face'>
<img src="https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0">
</div>
<div class='face'>
<img src="https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0">
</div>
<div class='face'>
<img src="https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0">
</div>
<div class='face'>
<img src="https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0">
</div>
<div class='face'>
<img src="https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0">
</div>
<div class='face'>
<img src="https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0">
</div>
</div>
</div>
CSS
body {
background: #2980b9;
}
.face {
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 100%;
color: #333;
border: 10px solid #333;
width: 200px;
height: 200px;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.face:nth-child(1) {
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
background: #333;
}
.face:nth-child(2) {
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
background: #333;
}
.face:nth-child(3) {
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
background: #6DC6D9;
}
.face:nth-child(4) {
-webkit-transform-origin: bottom;
transform-origin: bottom;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
background: #6DC6D9;
}
.face:nth-child(5) {
-webkit-transform-origin: bottom;
transform-origin: bottom;
-webkit-transform: translateZ(-200px);
transform: translateZ(-200px);
background: #f35e5c;
}
.face:nth-child(6) {
background: #f35e5c;
}
.face img {
width: 50%;
}
.group {
width: 100%;
height: 100%;
-webkit-perspective: 2000px;
perspective: 2000px;
-webkit-perspective-origin: center top;
perspective-origin: center top;
}
.cube {
-webkit-transform-origin: 100px 100px -100px;
transform-origin: 100px 100px -100px;
display: block;
position: relative;
width: 10%;
height: 10%;
top: calc(50vh - 100px);
left: calc(50vw - 100px);
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: rotation 3s linear infinite;
animation: rotation 3s linear infinite;
}
@-webkit-keyframes rotation {
from { -webkit-transform: rotateY(0) rotateX(0); transform: rotateY(0) rotateX(0); }
to { -webkit-transform: rotateY(-360deg) rotateX(360deg); transform: rotateY(-360deg) rotateX(360deg); }
}
@keyframes rotation {
from { -webkit-transform: rotateY(0) rotateX(0); transform: rotateY(0) rotateX(0); }
to { -webkit-transform: rotateY(-360deg) rotateX(360deg); transform: rotateY(-360deg) rotateX(360deg); }
}
