Backface-visibility - Property CSS

backface-visibility

Summary of characteristics of the `backface-visibility` property

Quick description

Visibility of the rear side of the element (while it is rotating).

Status

Standard

Usable for

HTML

Predefined values

visible | hidden

Initial value

visible

Inherited by default

No.

Animation type

Discrète : during an animation, the backface-visibility property passes from one value to another without transition.

W3C Module

CSS Transforms Module

References (W3C)

CSS Transforms Module Level 2

Document status: WD (Working Draft)

Syntactic scheme of `backface-visibility`.

Syntactic scheme of the property backface-visibility
Click on the schema for more details on the values

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

Global values
(common to all properties):


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 calculated 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 calculated 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.