/

HTML / CSS / JavaScript Tutorial

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


Desktop view | Switch to Mobile