Crystal Prism | Learning Axis

HTML

CSS

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(#0a0a15, #000);
  overflow: hidden;
  font-family: sans-serif;
}
.prism {
  width: 140px;
  height: 140px;
  position: relative;
  transform-style: preserve-3d;
  animation: float 4s ease-in-out infinite alternate;
  cursor: pointer;
}
.face {
  position: absolute;
  width: 140px;
  height: 140px;
  background: linear-gradient(145deg, rgba(255,255,255,0.25), rgba(0,0,0,0.1));
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  transform-style: preserve-3d;
  box-shadow: 0 0 25px rgba(0,255,255,0.2);
}
.f1 { transform: rotateY(0deg) translateZ(70px); }
.f2 { transform: rotateY(90deg) translateZ(70px); }
.f3 { transform: rotateY(180deg) translateZ(70px); }
.f4 { transform: rotateY(-90deg) translateZ(70px); }
.f5 { transform: rotateX(90deg) translateZ(70px); }
.f6 { transform: rotateX(-90deg) translateZ(70px); }
@keyframes float {
  0% { transform: rotateX(20deg) rotateY(20deg) translateY(-20px); }
  100% { transform: rotateX(40deg) rotateY(200deg) translateY(20px); }
}
.prism:hover .face {
  animation: prismGlow 1s linear infinite;
}
@keyframes prismGlow {
  0% { box-shadow: 0 0 20px rgba(0,255,255,0.25); }
  50% { box-shadow: 0 0 40px rgba(255,0,255,0.35); }
  100% { box-shadow: 0 0 20px rgba(0,255,255,0.25); }
}