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