CSS Transform to rotate image - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Rotate

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

Description

CSS Transform to rotate image

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">
div.transform-line {
   font-size:.96em;
   text-align:center;
   margin:0px auto;
   margin-bottom:6px;
   width:201px;
   padding:3px;
   color:Chartreuse;
   background-color:yellow;
}

div.transform-line:hover {
   width:601px;
   color:blue;
   animation:W4C 4s;
}

#rotate2D {<!--  w w  w  .j  a  v a 2  s . c  o m-->
   transition:transform 4s;
   transform-origin:158px 158px;
}

#rotate2D:hover {
   transform:rotate(181deg);
}

#rotate3D {
   position:relative;
   margin:11px;
   transition:transform 4s;
   transform-origin:141px 0;
}

#rotate3D:hover {
   transform:rotateY(181deg);
}

@keyframes W3C  {
   0% {
      background:Pink;
      width:301px;
   }
   
   25% {
      background:DeepPink;
   }
   
   50% {
      background:pink;
   }
   
   75% {
      background:HotPink;
   }
   
   100% {
      background:OrangeRed;
      width:601px;
   }

}
</style> 
 </head> 
 <body> 
  <div class="transform"> 
   <div class="transform-line" id="line">
     Lorem ipsum dolor 
   </div> 
   <div id="rotate3D"> 
    <img src="https://www.java2s.com/style/demo/Safari.png" alt="3D triangle"> 
   </div> 
   <div id="rotate2D"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png" alt="2D circle"> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials