HTML DOM Style transform Property

The HTML DOM style transform property returns and apply a 2D or 3D transformation to an element in an HTML document.

Syntax

Following is the syntax −

  • Returning transform

object.style.transform

  • Modifying transform

object.style.transform = “value”

Values

Here, value can be −

Value
Explanation
inherit
It inherits this property value from its parent element.
initial
It set this property value to its default value.
none
It sets no transformation.
transform-function
It can be any valid 2D or 3D transformation function.
vertical
It sets the height of the element as resizable.

Functions

Here valid 2D or 3D transformation functions are −

Function
Explanation
matrix(n,n,n,n,n,n)
It specifies a 2D transformation using a matrix of 6 values.
matrix3d(n,n,n,n,etc ...)
It specifies a 3D transformation using a matrix of 16 values.
translate(x,y)
It specifies a 2D translation.
translate3d(x,y,z)
It specifies a 3D translation.
translateX(x)
It specifies a translation using only X-axis value.
translateY(y)
It specifies a translation using only Y-axis value.
translateZ(z)
It specifies a translation using only Z-axis value.
scale(x,y)
It specifies a 2D scale.
scale3d(x,y,z)
It specifies a 3D scale.
scaleX(x)
It specifies a scale using only X-axis value.
scaleY(y)
It specifies a scale using only Y-axis value.
scaleZ(z)
It specifies a scale using only Z-axis value.
rotate(angle)
It specifies a 2D rotate.
rotate3d(x,y,z)
It specifies a 3D rotate.
rotateX(x)
It specifies a rotate using only X value.
rotateY(y)
It specifies a rotate using only Y-axis value.
rotateZ(z)
It specifies a rotate using only Z-axis value.
skew(x,y)
It specifies a 2D skew.
skewX(x)
It specifies a skew using only X-axis value.
skewY(y)
It specifies a skew using only Y-axis value.
perspective(n)
It specifies a perspective view for a 3D transformation.

Example

Let us see an example of HTML DOM style transform property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
      text-align: center;
   }
   .box {
      background: lightcoral;
      width: 200px;
      height: 200px;
      margin: 2rem auto;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
</style>
</head>
<body>
<h1>DOM Style transform Property Example</h1>
<div class="box">
</div>
<button onclick="add()" class="btn">Set transform</button>
<script>
   function add() {
      document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)";
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Set transform” button to apply 2D transformation on red box.

Updated on: 01-Jul-2020

100 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements