perspective - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:perspective

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. perspective

Introduction

In the following code the perspective view for the transformed "club card" image is animating from the initial value "300px" to "100px", and back to the initial value "300px" again up to infinite times.

-webkit- prefix is for Chrome, Safari, Opera.

-moz- prefix is for Firefox.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 perspective Property Animation</title>
  <style type="text/css">
.container{<!--from   ww  w  .j  av  a2s .  c  om-->
  width: 125px;
    height: 125px;
  margin: 50px auto;
    border: 4px solid #a2b058;
    background: #f0f5d8;
  
  -webkit-perspective: 300px;
    -webkit-animation: test 4s infinite;
  
    perspective: 300px;
    animation: test 4s infinite;
}
.container img{
    -webkit-transform: rotate3d(1, 0, 0, 60deg); 
    transform: rotate3d(1, 0, 0, 60deg); 
}

@-webkit-keyframes test {
    50% {-webkit-perspective: 100px;}
}

@keyframes test {
    50% {perspective: 100px;}
}
</style>
 </head>
 <body>

  <p> </p>
  <div class="container">
   <img src="https://www.java2s.com/style/demo/Opera.png" alt="Club Card">
  </div>
 </body>
</html>

Related Tutorials