3D transforms | Frontend Practical Guide

Overview

The transform CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`backface-visibility`	36	12	16	15.4	36	15.4
Other
`css.properties.perspective` The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.	36	12	16	9	36	9
`css.properties.perspective-origin` The perspective-origin CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the perspective property.	36	12	16	9	36	9
CSS property
`bottom`	12	12	10	4	18	2
`center`	12	12	10	4	18	2
`left`	12	12	10	4	18	2
`right`	12	12	10	4	18	2
`top`	12	12	10	4	18	2
`none`	12	12	10	4	18	3.2
Other
`css.properties.transform-style` The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.	36	12	16	9	36	9
CSS property
`3d` 3D support	12	12	16	4	18	3.2
CSS type
`matrix3d` The matrix3d() CSS function defines a 3D transformation as a 4x4 homogeneous matrix. Its result is a <transform-function> data type.	12	12	10	4	18	3.2
`perspective` The perspective() CSS function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a <transform-function> data type.	12	12	10	4	18	3.2
`perspective.none` `perspective(none)`	97	97	93	15.4	97	15.4
`rotate3d` The rotate3d() CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it. Its result is a <transform-function> data type.	12	12	10	4	18	3.2
`rotateX` The rotateX() CSS function defines a transformation that rotates an element around the x-axis (horizontal) without deforming it. Its result is a <transform-function> data type.	12	12	10	4	18	3.2
`rotateY` The rotateY() CSS function defines a transformation that rotates an element around the y-axis (vertical) without deforming it. Its result is a <transform-function> data type.	12	12	10	4	18	3.2
`rotateZ` The rotateZ() CSS function defines a transformation that rotates an element around the z-axis without deforming it. Its result is a <transform-function> data type.	12	12	10	4	18	3.2
`scale3d` The scale3d() CSS function defines a transformation that resizes an element in 3D space. Because the amount of scaling is defined by a vector [sx, sy, sz], it can resize different dimensions at different scales. Its result is a <transform-function> data type.	12	12	10	4	18	3.2
`scaleZ` The scaleZ() CSS function defines a transformation that resizes an element along the z-axis. Its result is a <transform-function> data type.	12	12	10	4	18	3.2
`translate3d` The translate3d() CSS function repositions an element in 3D space. Its result is a <transform-function> data type.	12	12	10	4	18	3.2
`translateZ` The translateZ() CSS function repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer. Its result is a <transform-function> data type.	12	12	10	4	18	3.2

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS

.card-container {
  perspective: 1000px;
}

.card {
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

Live demo

Rotatey (hover in flip)

3D Transforms RotateY (hover in flip) demo.

PreviewFullscreen

Rotatex Skew

3D Transforms RotateX skew demo.

PreviewFullscreen

Perspective Comparison

3D Transforms Perspective comparison demo.

PreviewFullscreen

Use cases

Using 3D transforms
The transform CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms.

Cautions

May not be supported in older browsers.

Overview

Browser support

Syntax

Live demo

Rotatey (hover in flip)

Rotatex Skew

Perspective Comparison

Use cases

Using 3D transforms

Cautions

Accessibility

Related links