How to apply a 2D or 3D transformation to an element with JavaScript?

Javascript Object Oriented Programming Front End Technology

Use the transform property in JavaScript to set 2D or 3D transformation to an element. Set the value to rotate (60deg), if you want to rotate it to 60 degrees, etc.

Example

You can try to run the following code to implement a 2D or 3D transformation to an element with JavaScript −

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            margin-left: 20px;
            border: 2px solid black;
            width: 300px;
            height: 250px;
            background-color: gray;
            color: white;
         }
      </style>
   </head>
   <body>
      <button onclick = "display()">Apply</button>

      <div id = "box"><p>Demo Text</p></div>

      <script>
         function display() {
            document.getElementById("box").style.transform = "rotate(60deg)";
         }
      </script>
   </body>
</html>

Abhinaya

Published on 27-Feb-2018 08:15:53

Previous Page Print Page