zoomFlip Animation

by Aides

HTML

<div class="wrapper">
  <div class="rotate">
    Hello World
  </div>
</div>

CSS

html, body
{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wrapper
{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid black;
  
   perspective: 100px;
   //perspective-origin: 50% 100px;
}

.rotate
{
   background-color: red; 
   width: 100px;
   height: 100px;
   position: relative;
   animation: zoomFlip 5s infinite;
   
}

@keyframes zoomFlip {
  0% 
  {
    transform: translateZ(0px) rotateY(0deg);
  }
  
  10%
  {
    transform: translateZ(-50px) rotateY(5deg); 
  }
  
  50%
  {
    transform: translateZ(-50px) rotateY(90deg); 
  }
  
  90%
  {
    transform: translateZ(-50px) rotateY(175deg);
  }
  
  100%
  {
    transform: translateZ(0px) rotateY(180deg);
  }
}