CSS Property: transform
[this page  pdf  back links]
The CSS (CSS3) transform property applies a 2D or a
3D transformation to an element, e.g. rotate, scale, skew transform or
translate (move) an element.
Valid property values
(other than inherit
and initial) are:
Value

Description

matrix(n1, n2, n3, n4, n5,
n6)

2D transformation
characterised by 6 values, see below

matrix3d(n1, n2, n3, n4, n5,
n6, n7, n8, n9, n10, n11, n12, n13, n14, n15, n16)

3D transformation
characterised by 16 values, see below

none

(default value). No transformation
applied

perspective(n)

A perspective view for
a 3D transformed element

rotate(angle)

2D rotation (around
origin), angle being a CSS
angle

rotate3d(x, y, z, angle)

3D rotation (around
line through origin), x, y and z being CSS lengths and angle
being a CSS angle

rotateX(angle)

3D rotation (around xaxis),
angle being a CSS
angle

rotateY(angle)

3D rotation (around yaxis),
angle being a CSS
angle

rotateZ(angle)

3D rotation (around zaxis),
angle being a CSS
angle

scale(x, y)

2D scaling
transformation, applied to x and yaxes, x and y
being numbers

scale3d(x, y, z)

3D scaling
transformation, applied to x, y and zaxes, x, y
and z being numbers

scaleX(x)

Scaling transformation
(stretching / squashing) applied to xaxis, x being numbers

scaleY(y)

Scaling transformation
(stretching / squashing) applied to yaxis, y being numbers

scaleZ(z)

Scaling transformation
(stretching / squashing) applied to zaxis, z being numbers

skew(xangle, yangle)

2D skew transformation
along x and yaxes, xangle and yangle being CSS angles

skewX(angle)

Skew transformation
along xaxis, angle being a CSS angle

skewY(angle)

Skew transformation
along yaxis, angle being a CSS angle

translate(x, y)

2D translation, applied
to x and yaxes, x and y being CSS lengths

translate3d(x, y, z)

3D translation, applied
to x, y and zaxes, x, y and z
being CSS lengths

translateX(x)

Translation (movement)
applied to xaxis, x being a CSS length

translateY(y)

Translation (movement)
applied to yaxis, y being a CSS length

translateZ(z)

Translation (movement)
applied to zaxis, z being a CSS length

Default Value:

none

JavaScript syntax:

e.g. object.style.transform="translateX(30px)"

Inherited:

No

Animatable:

Yes

2D transformations
There are 6 types of 2D
transformations: translate(), rotate(), scale(), skewX(),
skewY() and matrix(). These have the following
characteristics:

translate(): moves an
element from its current position along the x and yaxes, but doesnâ€™t
otherwise change its shape or size

rotate(): rotates an
element clockwise (positive) or counterclockwise (negative), e.g.
rotate(20deg)

scale(): increases or
decreases the size of an element (parameter is a ratio relative to the original
size), first parameter is width (i.e. xaxis) scaling, second is height
(i.e. yaxis) scaling

skewX(): introduces a
skew along the xaxis, by a given angle (positive or negative)

skewY(): introduces a
skew along the yaxis, by a given angle (positive or negative)

skew(xangle, yangle): combines skewX(xangle) and
skewY(yangle)

matrix(): combines all 2D
transform methods into a single method, involving the following parameters: matrix(scalex, skewy, skewx,
scaley, translatex, translatey)
The origin of the
transformation is defined by the transformorigin
property.
3D transformations
Not currently covered in
this page.
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <! Copyright (c) Nematrian Limited 2018 >
<head>
<style>
div {width: 200px; border: thin solid green;}
div.x1 {transform: skew(5deg,10deg);}
</style>
</head>
<body>
<div>Element with default property</div><br><br>
<div class="x1">Element with property set by HTML</div><br><br>
<div id="x2">Element with property set by JavaScript</div>
<script>
var x = document.getElementById("x2");
x.style.transform = "skew(5deg,10deg)";
</script>
</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyTransform() {
var x = document.createElement("DIV"); x.style.transform = "skew(5deg,10deg)"; return (window.getComputedStyle(x, null).transform == "skew(5deg,10deg)");
} 
NAVIGATION LINKS
Contents  Prev  Next  CSS Properties