# CSS 3D Transforms

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

• `rotate3d()`
• `rotateX()`
• `rotateY()`
• `rotateZ()`
• `translate3d()`
• `scale3d()`

## The rotate3d() Function

The `rotate3d()` function rotates the element in 3D space by the specified angle around the (x,y,z, angle) direction.

Mouse over me

## The rotateX() Function

The `rotateX()` function rotates an element around its X-axis at a given degree.

Mouse over me

## The rotateY() Function

The `rotateY()` function rotates an element around its Y-axis at a given degree.

Mouse over me

## The rotateZ() Function

The `rotateZ()` function rotates an element around its Z-axis at a given degree.

Mouse over me

## The translate3d() Function

The `translate3d()` function repositions an element in 3D space.

Mouse over me

## The scale3d() Function

The `scale3d()` function scales an element up or down on the 3D plane.

Mouse over me

## 3D 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
transform-style Specifies how nested elements are rendered in 3D space
perspective Specifies the perspective on how 3D elements are viewed
perspective-origin Specifies the bottom position of 3D elements
backface-visibility Defines whether or not an element should be visible when not facing the screen

## 3D Transform Functions

Function Description
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d(x,y,z) Defines a 3D translation
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element