Backface-visibility - CSS Property

Syntactic scheme of backface-visibility.

Description.

The backface-visibility property defines whether the back side of an element is displayed if the element has been rotated or is rotating in 3D.
To rotate an element, see the CSS property transform.

Values for backface-visibility.

• backface-visibility: visible;

  Default. The back side is displayed when the item is "from behind".

  Demonstration
• backface-visibility: hidden;

  The back side is not shown. The element therefore seems to disappear when it is seen from behind.

  Demonstration
• backface-visibility: initial; (visible) backface-visibility: inherit; backface-visibility: revert; backface-visibility: revertLayer; backface-visibility: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Manipulating the backface-visibility property programmatically.

With Javascript, change the value of backface-visibility.

Javascript accepts two syntaxes: the first in kebab-case notation, typical of CSS (a hyphen to separate words), and the second in camel-case notation, more common in Javascript (a capital letter to separate words).

let el = document.getElementById('id'); el.style['backface-visibility'] = 'hidden'; // or let el = document.getElementById('id'); el.style.backfaceVisibility = 'hidden';

With Javascript, read the value of backface-visibility.

This code retrieves the value of the backface-visibility property when it was assigned via the style attribute of the HTML. or by a Javascript code like the one given above. If the property was set via a CSS selector, its value will not be read.

let el = document.getElementById('id'); let value = el.style['backface-visibility']; // or let el = document.getElementById('id'); let value = el.style.backfaceVisibility;

With Javascript, read the computed value of backface-visibility.

The calculated value is the result of the evaluation of the inheritance mechanism. This can be the value assigned to the property directly on the item by the style attribute, the value assigned via a CSS selector, an inherited value, or the initial value of the property (i.e. visible in the case of backface-visibility).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('backface-visibility');

With JQuery, change the value of backface-visibility.

As is often the case, JQuery provides a shorter syntax than Javascript for reading and writing the value of backface-visibility.


$('#id').css('backface-visibility', 'hidden');
// or
$('#id').css('backfaceVisibility', 'hidden');


With JQuery, read the computed value of backface-visibility.

let value = $('#id').css('backface-visibility');

Test it yourself.

You can use the buttons below to apply a value to the backface-visibility property, and then display either the value as it is has been applied, or the calculated value. If an incorrect value is applied, the assigned value will be blank, and the calculated value will be visible.

Simulator.

Browsers compatibility with backface-visibility.

3D transformations and the backface-visibility property are now very well recognized by current browsers.

Notes:

(1) Internet Explorer does not support transform-style:preserve-3d, thus limiting the nesting of animations.

1

3D
transformations

2

backface-visibility
property

Estimated overall support.

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Property backface-visibility history.

Notes:

(1) Internet Explorer does not support transform-style:preserve-3d, thus limiting the nesting of animations.

• CSS Transforms Module Level 2

  In addition to the 2D transformations already presented in level 1 of the specification, this module deals with 3D transformations. It introduces new properties to manage the viewpoint height and the rendering of 3D effects.
  This module also introduces the individual properties of rotation, translation, and zoom effect.

  Regarding backface-visibility. Introduction of the backface-visibility property.
  

  March 03, 2020

  Working Draft.

  

  

  

See also, concerning transformations.

The W3C organizes CSS specifications into modules. The module CSS Transforms Module brings together all the definitions concerning CSS transformations:

Properties:

Functions:

matrix()

Applies a composite transformation to an element (translations, rotations...).

matrix3d()

Applies a series of 3D transformations to an element.

perspective()

Sets the height of the observer in the case of a 3D transformation.

rotate()

Sets a rotation to apply to the element in 2D (in the plane of the screen).

rotate3d()

Defines a 3D rotation to be applied to an element around any axis in 3D.

rotateX()

Defines a rotation of the element around the X-axis (in 3D),

rotateY()

Sets a 3D rotation of the element around the y-axis.

rotateZ()

Sets a rotation of the element around the z-axis.

scale()

Sets a magnification or reduction of the element.

scale3d()

Sets 3D scaling.

scaleX()

Sets X-axis scaling.

scaleY()

Set Y-axis scaling.

scaleZ()

Set Z-axis scaling.

skew()

Sets a tilt of the element along the X and/or Y axes.

skewX()

Sets a tilt of the element along the X-axis.

skewY()

Sets a tilt of the element along the Y-axis.

translate()

Defines a translation (a linear move) to an element.

translate3d()

Defines a 3D translation along one or more of the X, Y, and Z axes.

translateX()

Defines a translation along the X-axis (horizontally).

translateY()

Defines a translation along the Y axis (vertically).

translateZ()

Defines a translation along the Z axis (perpendicular to the screen).