body {
background-color: black;
perspective: 2000px;
perspective-origin: 50% 100%;
transform-style: preserve-3d;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background-image: url("348_andere-wereld.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#world {
width: 0px;
height: 0px;
background-color: aliceblue;
position: absolute;
transform: translateX(50vw) translateY(50vh) translateZ(0px) rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
.cube {
width: 0px;
height: 0px;
position: absolute;
transform-style: preserve-3d;
}
@keyframes spin {
0% {
transform: translateX(50vw) translateY(50vh) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: translateX(50vw) translateY(50vh) translateZ(0px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
#cube-one {
transform: translateY(-57px);
}
#cube-two {
transform: translateY(58px) rotateX(180deg);
}
.side {
position: absolute;
width: 200px;
height: 173.2px;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
background-color: rgb(31, 61, 211);
background-repeat: no-repeat;
background-size: 40px 40px;
}
.front {
transform: translateZ(50px) translateX(-100px) translateY(-100px) rotateX(35deg);
}
.back {
transform: translateZ(-50px) translateX(-100px) translateY(-100px) rotateX(-35deg);
}
.left {
transform: translateY(-100px) translateX(-150px) rotateY(90deg) rotateX(-35deg);
}
.right {
transform: translateY(-100px) translateX(-50px) rotateY(90deg) rotateX(35deg);
}
#cube-one .front {
background-image: url('data:image/svg+xml,');
background-position: 50% 60%;
background-size: 10px 10px;
}
#cube-two .front {
background-image: url('data:image/svg+xml,');
background-position: 50% 60%;
background-size: 20px 20px;
}
#cube-one .left {
background-image: url('data:image/svg+xml,');
background-position: 50% 60%;
}
#cube-two .right {
background-image: url('data:image/svg+xml,');
background-position: 50% 60%;
}
#cube-two .back {
background-image: url('data:image/svg+xml,');
background-position: 50% 60%;
}
#cube-one .back {
background-image: url('data:image/svg+xml,');
background-position: 50% 60%;
}
#cube-two .left {
background-image: url('data:image/svg+xml,');
background-position: 50% 60%;
}
#cube-one .right {
background-image: url('data:image/svg+xml,');
background-position: 50% 60%;
}