/    Sign up×
Reference /Pin to ProfileBookmark

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.

Browser Compatibilty

Demos

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

to submit a demo.
CSS
×

Success!

Help @reference spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

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

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

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

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...