CSS 3D Transforms

3D transforms allow you to move, rotate, scale, and skew HTML elements.

3D transforms is like 2D but with an additional z-axis.

The transform property creates the transformations.

The property values are functions, such as translateX, scaleY, and rotateZ.

Example

#

This element is rotated using a transform.
Hover over the element to see it rotate back.

This element is Y-rotated by 180 degrees
<style>
  .transform {
    background-color: aliceblue;
    border: 1px solid #555;
    padding: 15px;
    width: 250px;
    transform: rotateY(180deg);
  }

  .transform:hover {
    transform: none;
    cursor: pointer;
  }
</style>

<div class="transform">
  This element is Y-rotated
  by 180 degrees
</div>

Using 3D transforms

#

The values of the transform property are functions.

Here is a list of the available 3D transformation 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
translateX(x) Defines a 3D translation, using only the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
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

The translateX function

The translateX function moves an element along the x-axis.

This example has a standard element and an X-translated element.

A standard element
A translated element
<style>
  .standard {
    background-color: aliceblue;
    border: 1px solid black;
    width: 300px;
    padding: 25px;
  }

  .standard.translate {
    transform: translateX(50px);
  }
</style>

<div class="standard">
  A standard element
</div>

<div class="standard translate">
  A translated element
</div>

The scaleY function

The scaleY function resizes an element along the y-axis.

This example has a standard element and a Y-scaled element.

A standard element
A scaled element
<style>
  .standard {
    background-color: aliceblue;
    border: 1px solid black;
    width: 300px;
    padding: 25px;
    margin-left: 80px;
  }

  .standard.scale {
    transform: scale(1.2);
  }
</style>

<div class="standard">
  A standard element
</div>

<div class="standard scale">
  A scaled element
</div>

The rotateZ function

The rotateZ function rotates an element around the z-axis.

This example has a standard element and a Z-rotated element.

A standard element
A rotated element
<style>
  .standard {
    background-color: aliceblue;
    border: 1px solid black;
    width: 300px;
    padding: 25px;
    margin-top: 20px;
  }

  .standard.rotate {
    transform: rotateZ(90deg);
  }
</style>

<div class="standard">
  A standard element
</div>

<div class="standard rotate">
  A rotated element
</div>

Transform Properties

The table below are the properties used for 3D transforms.

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 facing away from the screen

Browser support for 3D Transforms

This table shows when 3D transforms support started for each browser.

Chrome
36.0 Jul 2014
Firefox
16.0 Oct 2012
IE/Edge
11.0 Oct 2013
Opera
23.0 Jul 2013
Safari
9.0 Sep 2015

You may also like

Guides