Computer >> Computer tutorials >  >> Programming >> Javascript

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


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>