<div id="container" class="flex gap-4 p-4 place-content-center font-bold">
  <div class="my-box flex items-center place-content-center w-24 h-24 bg-red-500 text-red-100">
    <span>Text</span>
  </div>
  <div class="my-box flex items-center place-content-center w-24 h-24 bg-sky-500 text-sky-100">
    <span>Text</span>
  </div>
  <div class="my-box flex items-center place-content-center w-24 h-24 bg-lime-500 text-lime-100">
    <span>Text</span>
  </div>
</div>

const t = gsap.timeline();

gsap.set("#container", {
  perspective: 1000
});
gsap.set(".my-box", {
  transformStyle: "preserve-3d",
  transformOrigin: "50% 50% 0"
});
gsap.set(".my-box span", {
  backfaceVisibility: "hidden"
})

gsap.to(".my-box", {
  keyframes: [{
    rotationX: 90,
    translateY: "-3rem",
    duration: 0.3
  }, {
    rotationX: 180,
    translateY: 0,
    duration: 0.3
  }, {
    rotationX: 270,
    translateY: "3rem",
    duration: 0.3
  }, {
    rotationX: 360,
    duration: 0.9,
    translateY: 0
  }],
  stagger: 0.3
});