style.css

.wrapper3d {
    text-align: center;
    align-items: center;
    justify-content: center;
    color: white;
    display: flex;


    
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
    width: 100px;
    height: 100px;
    position: absolute;
    right: 20px;
    bottom: 100px;
    transform: scale(0.75) rotateY(-30deg) rotateX(45deg) translateZ(4.5rem);
    transform-origin: 50% 100%;
    transform-style: preserve-3d;
    box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.25);
    transition: 0.6s ease transform;
    background: #ddce29;
  
    &:hover {
      transform: scale(1);
    }
  
    &::before,
    &::after {
      content: " ";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: transform 0.6s ease;
    }
  
    &::before {
      transform: translateZ(4rem);
      border: 5px solid #7371e7;
      &:hover {
        transform: translateZ(0);
      }
    }
  
    &::after {
      transform: translateZ(-4rem);
      background: #f96b59;
      box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.25);
      &:hover {
        transform: translateZ(-1px);
      }
    }
  }
  


  @keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
  }