CSS3 Animation to rotate along a circle path - HTML CSS CSS Property

HTML CSS examples for CSS Property:transform

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

Description

CSS3 Animation to rotate along a circle path

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

.container {<!--from  ww  w .java  2s  .  c  o  m-->
   margin: 0 auto;
   position: relative;
}
#center {
   width: 300px;
   height: 300px;
   margin: 225px auto 0;
   border: 5px solid #ddd;
   border-radius: 100%;
   background: #aaa;
}
@keyframes rot {
   from {
      transform: rotate(0deg)
      translate(-150px)
      rotate(0deg);
      -webkit-transform: rotate(0deg)
      translate(-150px)
      rotate(0deg);
   }
   to {
      transform: rotate(360deg)
      translate(-150px)
      rotate(-360deg);
      -webkit-transform: rotate(360deg)
      translate(-150px)
      rotate(-360deg);
   }
}
@-webkit-keyframes rot {
   from {
      transform: rotate(0deg)
      translate(-150px)
      rotate(0deg);
      -webkit-transform: rotate(0deg)
      translate(-150px)
      rotate(0deg);
   }
   to {
      transform: rotate(360deg)
      translate(-150px)
      rotate(-360deg);
      -webkit-transform: rotate(360deg)
      translate(-150px)
      rotate(-360deg);
   }
}
#small {
   position: absolute;
   width: 75px;
   height: 75px;
   border: 5px solid #ddd;
   border-radius: 100%;
   background: #aaa;
   animation: rot 3s infinite linear;
   -webkit-animation: rot 3s linear infinite;
   transform-origin: 50% 200px;
   -webkit-transform-origin: 50% 200px;
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div id="center"></div> 
   <div id="small"></div> 
  </div>  
 </body>
</html>

Related Tutorials