Reference /Pin to ProfileBookmark

# transform

The `transform` property specifies a 2D or 3D transformation to an element, allowing you to implement rotate, scale, skew, and other transformations.

## Syntax

Examples:

``````div.one {
transform: rotate(35deg);
}

div.two {
transform: skewY(40deg);
}

div.three {
transform: scaleX(1.1);
}``````

### Values

`none`
Designates that there will be no transformation.

`matrix(n,n,n,n,n,n)`
Designates a 2D transformation by defining 6 values of a matrix.

`matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)`
Designates a 3D transformation by defining 16 values of a 4×4 matrix.

`translate(x,y)`
Designates a 2D translation.

`translate3d(x,y,z)`
Designates a 3D translation.

`translateX(x)`
Designates a translation by defining the value of only the X-axis.

`translateY(y)`
Designates a translation by defining the value of only the Y-axis.

`translateZ(z)`
Designates a 3D translation by defining the value of only the Z-axis.

`scale(x,y)`
Designates a 2D scale transformation.

`scale3d(x,y,z)`
Designates a 3D scale transformation.

`scaleX(x)`
Designates a scale transformation by defining the value of only the X-axis.

`scaleY(y)`
Designates a scale transformation by defining the value of only the Y-axis.

`scaleZ(z)`
Designates a 3D scale transformation by defining the value of only the Z-axis.

`rotate(angle)`
Designates a 2D rotation by defining the angle.

`rotate3d(x,y,z,angle)`
Designates a 3D rotation.

`rotateX(angle)`
Designates a 3D rotation on the X-axis.

`rotateY(angle)`
Designates a 3D rotation on the Y-axis.

`rotateZ(angle)`
Designates a 3D rotation on the Z-axis.

`skew(x-angle,y-angle)`
Designates a 2D skew transformation on the X- and the Y-axis.

`skewX(angle)`
Designates a 2D skew transformation on the X–axis.

`skewY(angle)`
Designates a 2D skew transformation on the Y–axis.

`perspective(n)`
Designates a perspective view for a 3D transformed element.

`initial`
Sets the property to its default value.

`inherit`
Inherits this property’s value from its parent item.

## Demos

Have a code example of `transform`? Submit a codepen.io demo and we'll showcase it here

to submit a demo.
CSS

### Also in #CSS↴

clip-pathoutline-offsetcolumn-rule-width
×

### Success!

Tweet This
version: 0.1.9 BETA 9.26,
whats_new: community page,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,

version: 0.1.8,

version: 0.1.7,

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @ddiebold17,
tipped: article
amount: 1000 SATS,