/

HTML / CSS / JavaScript Tutorial

CSS Property: backface-visibility

[this page | pdf | back links]

The CSS (CSS3) backface-visibility property indicates whether an element should remain visible when it is not facing the screen (i.e. what happens when an element is rotated to face away from the viewer).

 

Valid property values (other than inherit and initial) are:

 

Value

Description

hidden

Backside is not visible

visible

(default value). Backside is visible

 

Default Value:

visible

JavaScript syntax:

e.g. object.style.backfaceVisibility="hidden"

Inherited:

No

Animatable:

No

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div {width: 200px; height: 40px;
	background-color: yellow;
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);}
div.x1 {backface-visibility: visible}
div.x2 {backface-visibility: hidden}
</style>
</head>
<body>

Element with visible backface:<br>
<div class="x1">Element with visible backface</div><br><br>
Element with hidden backface:
<div class="x2">Element with hidden backface</div><br>
</div>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyBackfaceVisibility() {
  var x = document.createElement("DIV"); x.style.backfaceVisibility = "hidden"; return (window.getComputedStyle(x, null).backfaceVisibility == "hidden");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile