CSS transform Property

The transform property specifies two-dimensional or three-dimensional transformation of the element.

The transform property allows to rotate, scale, skew or translate the element.

The transform property takes none value or from the list of transform functions.

Only the box model positioned elements can be transformed.

Initial Value none
Applies to Transformable elements.
Inherited No.
Animatable Yes. Degree is animatable.
Version CSS3
DOM Syntax Object.style.transform = "rotate(10deg)";

Syntax

transform: none | transform-functions | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      border: 2px dashed #666;
      background-color: #8ebf42;
      transform: translate(10px, 40px) rotate(50deg);
      width: 130px;
      height: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <div>An element</div>
  </body>
</html>

An example which contains "rotate", "skewY", "scaleY", "translateX", "skew" values:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div.box1 {
      width: 130px;
      height: 80px;
      border: 1px solid #000;
      background-color: #1c87c9;
      -ms-transform: rotate(30deg); 
      -webkit-transform: rotate(30deg); 
      transform: rotate(30deg);
      }
      div.box2 {
      width: 120px;
      height: 80px;
      border: 1px solid #000;
      background-color: #8ebf42;
      -ms-transform: skewY(30deg); /
      -webkit-transform: skewY(30deg); /* Safari 3-8 */
      transform: skewY(30deg);
      }
      div.box3 {
      width: 160px;
      height: 80px;
      border: 1px solid #000;
      background-color: #FFFF00;
      -ms-transform: scaleY(1); 
      -webkit-transform: scaleY(1); 
      transform: scaleY(1);
      }
      div.box4 {
      width: 160px;
      height: 80px;
      border: 1px solid #000;
      background-color: #ccc;
      -ms-transform: rotate(160deg); 
      -webkit-transform: rotate(160deg); 
      transform: rotate(160deg);
      }
      div.box5 {
      width: 160px;
      height: 80px;
      border: 1px solid #000;
      background-color: #990099;
      -ms-transform: translateX(50px); 
      -webkit-transform: translate(50px); 
      transform: translateX(50px);
      }
      div.box6 {
      width: 160px;
      height: 80px;
      border: 1px solid #000;
      background-color: #FF0000;
      -ms-transform: skew(170deg,170deg);/
      -webkit-transform: skew(170deg,170deg); 
      transform: skew(170deg,170deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <h3>transform: rotate(30deg):</h3>
    <div class="box1"></div>
    <br>
    <h3>transform: skewY(30deg):</h3>
    <div class="box2"></div>
    <br>
    <h3>transform: scaleY(1):</h3>
    <div class="box3"></div>
    <br>
    <h3>transform: transform:rotate(160deg):</h3>
    <div class="box4"></div>
    <br>
    <h3>transform: translateX(50px):</h3>
    <div class="box5"></div>
    <br>
    <h3>transform: skew(170deg,170deg):</h3>
    <div class="box6"></div>
  </body>
</html>

In the given example, for maximum browser compatibility the -webkit- for Safari, Google Chrome, and Opera extensions are used.

Values

Value Description
none No transform is applied.
translate() Translates the element by a vector [tx, ty]. Tx is the translation along the x-axis, and ty is the translation along the y-axis.
translateX() Translates the element along the x-axis.
translateY() Translates the element along the y-axis.
scale() Scales an element up or down.
scaleX() Scales an element up or down the direction of the x-axis.
scaleY() Scales an element up or down the direction of the y-axis.
rotate(number) Rotates an element in the two-dimensional space.The angle is specified in the parameter.
skew() Specifies a 2D skew transformation along the x-axis and the y-axis.
skewX Specifies a 2D skew transformation along the x-axis.
skewY Specifies a 2D skew transformation along the y-axis.
matrix() Specifies a 2D transformation, using a matrix of six values.
translateZ Translates an element by the given amount along the z-axis.
translate3d() Specifies a three dimensional translation.
scaleZ() Scales an element in the third dimension, along the z-axis.
scale3d() Specifies a three dimensional scale transformation.
rotateX() Rotates an element about the x-axis in three-dimensional space.
rotateY() Rotates an element about the y-axis in three-dimensional space.
rotateZ() Rotates an element about the z-axis in three-dimensional space.
rotate3d() Specifies a three dimensional rotate transformation.
matrix3d() Specifies a 3D transformation, using a 4x4 matrix of 16 values.
perspective() Specifies a perspective view for the three dimensional element.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

36.0+
12.0-35.0 -webkit-
12.0+ 16.0+
10.0-15.0 -moz-
4.0+
-webkit-
23.0+
15.0-22.0 -webkit-

Practice Your Knowledge

Which statement is incorrect about transform properrty?




Related articles