Add transform animation to an element - Javascript CSS Style Property

Javascript examples for CSS Style Property:transform

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. transform

Description

Add transform animation to an element

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
console.clear();
function scale() {//ww w  . j  a  va2s  .c  om
    document.querySelector("#container > circle").setAttribute('transform', 'scale(1.5,1.5)');
}

      </script> 
   </head> 
   <body> 
      <svg height="150" width="150" id="container"> 
         <circle cx="25" r="20" cy="20" fill="blue" id="circle"></circle> 
      </svg> 
      <button id="zoom" onclick="scale()">scale</button>  
   </body>
</html>

Related Tutorials