3D transforms
The backface-visibility CSS property sets whether the back face of an element is visible when turned towards the user.
An element's back face is a mirror image of its front face. Though invisible in 2D, the back face can become visible when a transformation causes the element to be rotated in 3D space. (This property has no effect on 2D transforms, which have no perspective.)
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 36 | 12 | 16 | 15.4 | 36 | 15.4 | |
| Other | ||||||
| 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 |
| 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 | ||||||
| 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 | ||||||
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
- Available with a vendor prefix: -webkit- (12)
- Available with a vendor prefix: -webkit- (12)
- Available with a vendor prefix: -webkit- (49)
- Available with a vendor prefix: -moz- (10)
- Available with a vendor prefix: -webkit- (5.1)
- Available with a vendor prefix: -webkit- (18)
- Available with a vendor prefix: -webkit- (5)
- Available with a vendor prefix: -webkit- (12)
- Available with a vendor prefix: -webkit- (12)
- Available with a vendor prefix: -webkit- (49)
- Available with a vendor prefix: -moz- (10)
- From version 147, Firefox supports `-webkit-perspective` with unitless values for increased compatibility.
- Available with a vendor prefix: -webkit- (4)
- Available with a vendor prefix: -webkit- (18)
- In iOS 13, the `perspective` property did not function properly. The issues were fixed in iOS 14.
- Available with a vendor prefix: -webkit- (2)
- Available with a vendor prefix: -webkit- (12)
- Available with a vendor prefix: -webkit- (12)
- Available with a vendor prefix: -webkit- (49)
- Available with a vendor prefix: -moz- (10)
- Available with a vendor prefix: -webkit- (4)
- Available with a vendor prefix: -webkit- (18)
- Available with a vendor prefix: -webkit- (2)
- Available with a vendor prefix: -webkit- (12)
- Available with a vendor prefix: -webkit- (12)
- Available with a vendor prefix: -webkit- (49)
- Available with a vendor prefix: -moz- (10)
- Before Safari 17, `::before` and `::after` pseudo elements were not included in the 3D rendering context (see bug 256430).
- Available with a vendor prefix: -webkit- (4)
- Available with a vendor prefix: -webkit- (18)
- Available with a vendor prefix: -webkit- (2)
- Before Firefox 16, the translation values of `matrix3d()` could be `<length>`s, in addition to the standard `<number>`.
Syntax
.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
Use cases
-
Using 3D transforms
The backface-visibility CSS property sets whether the back face of an element is visible when turned towards the user.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.