Rotate an image around on oval shape image in css3 animation - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Rotate

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

Description

Rotate an image around on oval shape image in css3 animation

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">

.deform  {<!--  w  w w.java  2s .c  om-->
   width: 200px;
   height: 200px;
   -webkit-transform: scaleX(3);
   background-color: lightblue;
   left: 270px;
   position: absolute;
   top: 50px;
   border-radius: 50%;
}
.rotate {
   width: 100%;
   height: 100%;
   -webkit-animation: circle 10s infinite linear;
   -webkit-transform-origin: 50% 50%;
}
.counterrotate {
   width: 50px;
   height: 50px;
   -webkit-animation: ccircle 10s infinite linear;
}
.inner {
   width: 50px;
   height: 50px;
   position: absolute;
   left: 0px;
   top: 0px;
   background-color: red;
   display: block;
   -webkit-transform: scaleX(0.33);
}
@-webkit-keyframes circle {
   from {-webkit-transform: rotateZ(0deg)}
   to {-webkit-transform: rotateZ(360deg)}
}
@-webkit-keyframes ccircle {
   from {-webkit-transform: rotateZ(360deg)}
   to {-webkit-transform: rotateZ(0deg)}
}


      </style> 
 </head> 
 <body> 
  <div class="deform"> 
   <div class="rotate"> 
    <div class="counterrotate"> 
     <div class="inner">
       A 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials