<html lang="en">
<head>
<style>
.cube-container {
width: 240px;
height: 240px;
perspective: 1000px;
margin: 75px;
}
.cube {
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotateY(0deg);
animation: spin 10s infinite linear;
}
.face {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.9;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.front {
background: linear-gradient(#ff007f, #ffcc00);
transform: translateZ(100px);
}
.back {
background: linear-gradient(#ffcc00, #ff007f);
transform: rotateY(180deg) translateZ(100px);
}
.top {
background: linear-gradient(#00b3e6, #ff007f);
transform: rotateX(-90deg) translateZ(100px);
}
.bottom {
background: linear-gradient(#ff007f, #00b3e6);
transform: rotateX(90deg) translateZ(100px);
}
.right {
background: linear-gradient(#00b3e6, #ffcc00);
transform: rotateY(90deg) translateZ(100px);
}
.left {
background: linear-gradient(#ffcc00, #00b3e6);
transform: rotateY(-90deg) translateZ(100px);
}
.cube:hover {
animation-play-state: paused;
}
@keyframes spin {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
</style>
</head>
<body>
<div class="cube-container">
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face top"></div>
<div class="face bottom"></div>
<div class="face right"></div>
<div class="face left"></div>
</div>
</div>
</body>
</html>