Create flip animation with transform:perspective - HTML CSS CSS

HTML CSS examples for CSS:Animation

  1. HOME
  2. HTML CSS
  3. CSS
  4. Animation

Description

Create flip animation with transform:perspective

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.flip {<!--from   w ww . j  ava2  s  .  c o m-->
   height:501px;
   width:201px;
   background:red;
   color:Chartreuse;
}

.animated {
   -webkit-animation-fill-mode:both;
   -moz-animation-fill-mode:both;
   -ms-animation-fill-mode:both;
   -o-animation-fill-mode:both;
   animation-fill-mode:both;
   -webkit-animation-duration:2s;
   -moz-animation-duration:2s;
   -ms-animation-duration:2s;
   -o-animation-duration:2s;
   animation-duration:2s;
}

.flip {
   -webkit-backface-visibility:visible !important;
   -webkit-animation-name:flip;
   -moz-backface-visibility:visible !important;
   -moz-animation-name:flip;
   -o-backface-visibility:visible !important;
   -o-animation-name:flip;
   backface-visibility:visible !important;
   animation-name:flip;
}

.inner {
   display:block;
   -webkit-transform:perspective(401px) rotateY(181DEG)!important;
}

@-webkit-keyframes flip {
   0% {
      -webkit-transform:perspective(401px) rotateY(0deg);
   }
   
   100% {
      -webkit-transform:perspective(401px) rotateY(-181deg);
   }

}

@-moz-keyframes flip {
   0% {
      -webkit-transform:perspective(401px) rotateY(0deg);
   }
   
   100% {
      -webkit-transform:perspective(401px) rotateY(-181deg);
   }

}

@-o-keyframes flip {
   0% {
      -webkit-transform:perspective(401px) rotateY(0deg);
   }
   
   100% {
      -webkit-transform:perspective(401px) rotateY(-181deg);
   }

}

@keyframes flip {
   0% {
      -webkit-transform:perspective(401px) rotateY(0deg);
   }
   
   100% {
      -webkit-transform:perspective(401px) rotateY(-181deg);
   }

}
</style> 
 </head> 
 <body> 
  <div class="animated flip"> 
   <span class="inner">Settings</span> 
  </div>  
 </body>
</html>

Related Tutorials