transform - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:transform

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

Introduction

-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 transform Property Animation</title>
  <style type="text/css">
.container{<!--   ww  w  .  j ava 2  s .c o m-->
  margin: 25px;
}
.container img{
  -webkit-animation: test 4s infinite;  
  animation: test 4s infinite;  
}

@-webkit-keyframes test {
    50% {-webkit-transform: rotate(360deg);}
}

@keyframes test {
    50% {transform: rotate(360deg);}
}
/* Example of 3D Transform */
.container-3d{
  margin: 25px;
  width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #a2b058;
    background: #f0f5d8;
}
.container-3d img{
  
  -webkit-animation: test3d 4s infinite;
  -webkit-transform-origin: right center 0;
  
  animation: test3d 4s infinite;
    transform-origin: right center 0;
}

@-webkit-keyframes test3d {
    50% {
        -webkit-transform: rotate3d(0, 1, 0, 180deg); 
    }
}

@keyframes test3d {
    50% {
        transform: rotate3d(0, 1, 0, 180deg); 
    }
}
</style>
 </head>
 <body>

<p>In the following image is rotating form its original position to 360 degree clockwise, and back to the original position again up to infinite times.</p>
  <p> </p>
  <div class="container">
   <img src="https://www.java2s.com/style/demo/Firefox.png" alt="Star Fish">
  </div>
  <hr>
<p>In the following image is rotating 180 degree in 3D space along the Y-axis (i.e. right edge), and back to the original position again up to infinite times.</p>
  <p> </p>
  <div class="container-3d">
   <img src="https://www.java2s.com/style/demo/Opera.png" alt="Club Card">
  </div>
 </body>
</html>

Related Tutorials