# CSS 2D Transforms

The `transform` property applies a 2D or 3D transformation to an element such as translate, rotate, scale etc.

A transformation is an effect that lets an element change shape, size and position.

CSS supports 2D and 3D transformations.

Mouse over the elements below to see the difference between a 2D and a 3D transformation:

## CSS 2D Transformations

In this chapter you will learn about the following 2D transformation functions:

• `translate()`
• `rotate()`
• `scale()`
• `skewX()`
• `skewY()`
• `skew()`
• `matrix()`

You will learn about 3D transformations in the next chapter.

## The translate() Function

The `translate()` function moves an element from its current position according to the parameters given for the X-axis and the Y-axis.

Original Transformed

## The rotate() Function

The `rotate()` function rotates an element clockwise or counter-clockwise according to a given degree.

Original Transformed

Using negative values will rotate the element counter-clockwise.

## The scale() Function

The `scale()` function increases or decreases the size of an element according to the parameters given for the width and height.

Original Transformed

## The skewX() Function

The `skewX()` function skews an element along the X-axis by the given angle.

Original Transformed

## The skewY() Function

The `skewY()` function skews an element along the Y-axis by the given angle.

Original Transformed

## The skew() Function

The `skew()` function skews an element along the X-axis and Y-axis by the given angle.

Original Transformed

## The matrix() Function

The `matrix()` function combines all the 2D transform functions into one.

This function take six parameters, containing mathematics functions, which allows you to rotate, scale, translate, & skew elements.

Syntax:
`transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())`

## 2D Transform Properties

Property Description
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements

## 2D Transform Functions

Function Description Example
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
scale(x,y) Defines a 2D scale transformation, changing the elements width and height
scaleX(n) Defines a 2D scale transformation, changing the element's width
scaleY(n) Defines a 2D scale transformation, changing the element's height
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis
translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n) Defines a 2D translation, moving the element along the X-axis
translateY(n) Defines a 2D translation, moving the element along the Y-axis