Melting Ice Cube | Learning Axis

HTML

CSS

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
body {
  background: radial-gradient(hsl(210, 30%, 20%), hsl(210, 30%, 0%));
}
.cube {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(35deg) translate(-50%, -50%);
}
.cube > div {
  position: absolute;
  left: 50%;
  top: 50%;
  animation: melt 2s ease-out 1s both;
  transform-style: preserve-3d;
}
.cube > div > div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  background: linear-gradient(rgba(237, 237, 237, 0.2), rgba(153, 153, 153, 0.1));
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3), inset 0 0 4px rgba(255, 255, 255, 0.2);
  transform-origin: center;
}
.cube > div > div:nth-child(1) {
  transform: translate3d(0, 0, 50px);
}
.cube > div > div:nth-child(2) {
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}
.cube > div > div:nth-child(3) {
  transform: rotateX(180deg) translate3d(0, 0, 50px);
}
.cube > div > div:nth-child(4) {
  transform: rotateX(270deg) translate3d(0, 0, 50px);
  animation: puddle 2s ease-out 1s both;
}
.cube > div > div:nth-child(5) {
  transform: rotateY(90deg) translate3d(0, 0, 50px);
}
.cube > div > div:nth-child(6) {
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}
@keyframes melt {
  0% {
    transform: translate3d(0, 0, 0) scaleY(1);
  }
  90% {
    transform: translate3d(0, 50px, 0) scaleY(0.05);
  }
  100% {
    transform: translate3d(0, 50px, 0) scaleY(0);
  }
}
@keyframes puddle {
  100% {
    box-shadow: 0 0 0 80px rgba(255, 255, 255, 0.15);
  }
}