:root {
--side-height: 1250px;
}
body {
background-color: black;
perspective: 700px;
transform-style: preserve-3d;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
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;
}
.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(0deg) rotateY(360deg) rotateZ(0deg);
}
}
.side {
position: absolute;
width: 1000px;
height: var(--side-height);
transform-style: preserve-3d;
background-color: rgba(110, 10, 10, 0.632);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bottom {
width: 2000px;
height: 2000px;
transform: translateX(-1000px) translateY(-250px) rotateX(90deg);
border: none;
background-color: black;
clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
background-image: url('data:image/svg+xml,');
background-position: center;
background-repeat: no-repeat;
background-size: 2000px;
}
.front {
transform: translateZ(866px) translateX(-500px) translateY(-500px);
background-color: rgba(0, 0, 0, 0);
background-image: url('data:image/svg+xml,');
}
.back {
transform: translateZ(-866px) translateX(-500px) translateY(-500px) rotateY(180deg);
}
.left {
transform: translateY(-500px) translateX(-1242.5px) translateZ(430px) rotateY(-60deg);
}
.right {
transform: translateY(-500px) translateX(242.5px) translateZ(430px) rotateY(60deg);
}
.top {
transform: translateY(-1000px) translateX(-500px) rotateX(90deg);
}
.frontright {
transform: translateY(-500px) translateX(242.5px) translateZ(-430px) rotateY(-60deg);
background-color: rgba(0, 0, 0, 0);
background-image: url('data:image/svg+xml,');
}
.frontleft {
transform: translateY(-500px) translateX(-1242.5px) translateZ(-430px) rotateY(60deg);
background-color: rgba(0, 0, 0, 0);
background-image: url('data:image/svg+xml,');
}