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 x-axis),
angle being a CSS
angle
|
|
rotateY(angle)
|
3D rotation (around y-axis),
angle being a CSS
angle
|
|
rotateZ(angle)
|
3D rotation (around z-axis),
angle being a CSS
angle
|
|
scale(x, y)
|
2D scaling
transformation, applied to x and y-axes, x and y
being numbers
|
|
scale3d(x, y, z)
|
3D scaling
transformation, applied to x, y and z-axes, x, y
and z being numbers
|
|
scaleX(x)
|
Scaling transformation
(stretching / squashing) applied to x-axis, x being numbers
|
|
scaleY(y)
|
Scaling transformation
(stretching / squashing) applied to y-axis, y being numbers
|
|
scaleZ(z)
|
Scaling transformation
(stretching / squashing) applied to z-axis, z being numbers
|
|
skew(x-angle, y-angle)
|
2D skew transformation
along x and y-axes, x-angle and y-angle being CSS angles
|
|
skewX(angle)
|
Skew transformation
along x-axis, angle being a CSS angle
|
|
skewY(angle)
|
Skew transformation
along y-axis, angle being a CSS angle
|
|
translate(x, y)
|
2D translation, applied
to x and y-axes, x and y being CSS lengths
|
|
translate3d(x, y, z)
|
3D translation, applied
to x, y and z-axes, x, y and z
being CSS lengths
|
|
translateX(x)
|
Translation (movement)
applied to x-axis, x being a CSS length
|
|
translateY(y)
|
Translation (movement)
applied to y-axis, y being a CSS length
|
|
translateZ(z)
|
Translation (movement)
applied to z-axis, 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 y-axes, but doesn’t
otherwise change its shape or size
-
rotate(): rotates an
element clockwise (positive) or counter-clockwise (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. x-axis) scaling, second is height
(i.e. y-axis) scaling
-
skewX(): introduces a
skew along the x-axis, by a given angle (positive or negative)
-
skewY(): introduces a
skew along the y-axis, by a given angle (positive or negative)
-
skew(x-angle, y-angle): combines skewX(x-angle) and
skewY(y-angle)
-
matrix(): combines all 2D
transform methods into a single method, involving the following parameters: matrix(scale-x, skew-y, skew-x,
scale-y, translate-x, translate-y)
The origin of the
transformation is defined by the transform-origin
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