Floral Animation | Learning Axis

HTML

CSS

* , *::before, *::after {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #222;
  background-image: radial-gradient(circle at center, #222, #111 300px);
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 420px;
  overflow: hidden;
}
.flower {
  position: relative;
  transform-style: preserve-3d;
  animation: rotateFlower 60s linear infinite;
}
@keyframes rotateFlower {
  to { transform: rotateY(360deg); }
}
.leaf {
  position: absolute;
  height: 120px;
  transform-origin: top;
  transform-style: preserve-3d;
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 0 100%);
  background-image: linear-gradient(#000e, #fff1);
  border-radius: 100px;
  animation: leafOpen 12s ease-in-out infinite,
    ocLeafWidth 6s alternate infinite ease-in-out;
}
@keyframes leafOpen {
  from {
    transform: translateZ(-30px) rotate(var(--leafAngle)) rotateX(-90deg) rotateY(-15deg);
  }
  to {
    transform: translateZ(30px) rotate(var(--leafAngle)) rotateX(90deg) rotateY(45deg);
  }
}
@keyframes ocLeafWidth {
  from { width: 0; }
  to { width: 60px; }
}