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

JavascriptObject Oriented ProgrammingFront 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>
raja
Published on 27-Feb-2018 08:15:53
Advertisements