.scene {
height: 200px;
margin: 100px;
perspective: 600px;
width: 200px;
}
.tesseract {
animation: 8s linear infinite rotateyly;
height: 100%;
position: relative;
transform-style: preserve-3d;
width: 100%;
}
.tesseract-cell-front, .tesseract-cell-right, .tesseract-cell-back, .tesseract-cell-left {
height: 100%;
position: absolute;
transform-style: preserve-3d;
width: 100%;
}
.tesseract-cell-front {
animation: 8s step-end infinite cell-front;
}
.tesseract-cell-right {
animation: 8s step-end infinite cell-right;
}
.tesseract-cell-back {
animation: 8s step-end infinite cell-back;
}
.tesseract-cell-left {
animation: 8s step-end infinite cell-left;
}
.ridge-front, .ridge-right, .ridge-back, .ridge-left, .ridge-top, .ridge-bottom {
height: 200px;
position: absolute;
width: 200px;
}
.ridge-front {
transform: translateZ(100px);
}
.ridge-right {
transform: rotateY(90deg) translateZ(100px);
}
.ridge-back {
transform: rotateY(180deg) translateZ(100px);
}
.ridge-left {
transform: rotateY(-90deg) translateZ(100px);
}
.ridge-top {
transform: rotateX(90deg) translateZ(100px);
}
.ridge-bottom {
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotateyly {
0% {
transform: rotate3d(-1, 1, 0, 45deg) rotateX(0turn);
}
100% {
transform: rotate3d(-1, 1, 0, 45deg) rotateX(-1turn);
}
}