perspective-origin - HTML CSS CSS Animatable Property

Introduction

In the following code the perspective-origin for the transformed "club card" image is animating from the initial value "50% 50%" to "50% top", and back to the initial value "50% 50%" 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-origin Property Animation</title>
  <style type="text/css">
.container{<!--from w w  w .  jav  a  2 s  .c  o m-->
  width: 125px;
    height: 125px;
  margin: 50px auto;
    border: 4px solid #a2b058;
    background: #f0f5d8;
  
  -webkit-perspective: 300px;
    -webkit-animation: test 4s infinite;
  
    perspective: 150px;
    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-origin: 50% top;}
}

@keyframes test {
    50% {perspective-origin: 50% top;}
}
</style>
 </head>
 <body>

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

perspective-origin - HTML CSS CSS Animatable Property

Introduction

Demo Code

Related Tutorials