/

### CSS Property: transform

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 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

EXAMPLE:

HTML USED IN THIS EXAMPLE:
 ```
Element with default property

Element with property set by HTML

Element with property set by JavaScript
```

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)"); }```