CSS transform Property

The CSS transform property applies a 2D or 3D transformation to an element. It is one of the CSS3 properties. This property allows rotating, skewing, scaling, or translating an element. It takes the none value or one of the transform functions.

INFO

Transforms can be applied to any element, including block, flex, grid, and inline elements.

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

Syntax

CSS transform values

css

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

Example of the transform property:

CSS transform code example

html

<!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>

Result

CSS transform several values

Example of the transform property with the "rotate", "skewY", "scaleY", "translateX", "skew" values:

CSS transform several values example

html

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

The "skew" value

The skew() transform value is used for tilting an element along the x-axis and the y-axis. The skewX() and skewY() transform values are used for tilting an element along the x-axis or the y-axis.

The "rotate" value

With the rotate() value, the element is rotated clockwise from its original position. Using a negative value rotates it in the opposite direction.

The "translate" value

The translate() value moves the element up or down, as well as sideways. More values are presented below.

Values

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

Practice

Which statement is incorrect about transform properrty?

It can be applied to transformable elements.The transform property allows to rotate, scale, skew, or translate the element.It specifies only two-dimensional transformation of the element.

CSS transform Property ​

Syntax ​

Example of the transform property: ​

Result ​

Example of the transform property with the "rotate", "skewY", "scaleY", "translateX", "skew" values: ​

The "skew" value ​

The "rotate" value ​

The "translate" value ​

Values ​

Practice ​