body,html { height: 100%; margin: 0; overflow: hidden;background-color: #111;}.container {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;perspective: 1000px;}.cube {width: 200px;height: 200px;position: relative;transform-style: preserve-3d;animation: spin 20s infinite linear; }.cube div {width: 200px;height: 200px;position: absolute;opacity: 0.8;border-radius: 10px;transition: transform 0.5s ease;}.cube .front {transform: translateZ(100px);}.cube .back {transform: translateZ(-100px) rotateY(180deg);}.cube .right {transform: translateX(100px) rotateY(90deg);}.cube .left {transform: translateX(-100px) rotateY(-90deg);}.cube .top {transform: translateY(-100px) rotateX(90deg);}.cube .bottom {transform: translateY(100px) rotateX(-90deg);}.cube:hover div {opacity: 1;transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}@keyframes spin {0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}100% {transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}