Javascript Reference - HTML DOM Style backfaceVisibility Property

The backfaceVisibility property gets and sets whether to display an element when it is not facing the screen during rotation.

Browser Support


`backfaceVisibility`	Yes (WebkitBackfaceVisibility)	10	Yes	Yes (WebkitBackfaceVisibility)	Yes (WebkitBackfaceVisibility)

Syntax

Return the backfaceVisibility property:

var v = object.style.backfaceVisibility

Set the backfaceVisibility property:

object.style.backfaceVisibility=visible|hidden|initial|inherit

Property Values

visible: Default value. The backside is visible
hidden: The backside is not visible

Technical Details

Default Value:	visible
Return Value:	A string representing the backface-visibility property
CSS Version	CSS3

Example

The following code shows how to hide the backside of a rotating <div> element.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from   w ww. ja v a  2  s  . c o  m-->
    width: 300px;
    height: 100px;
    background: red;
    color: white;
    -webkit-animation: mymove 2s infinite linear alternate; /* Chrome, Safari, Opera */
    animation: mymove 2s infinite linear alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    to {-webkit-transform: rotateY(180deg);}
}

@keyframes mymove {
    to {transform: rotateY(180deg);}
}
</style>
</head>
<body>
<div id="myDIV">Hello</div>

<input type="checkbox" onclick="myFunction(this)" checked>backface-visibility

<script>
function myFunction(x) {
  if (x.checked === true) {
    document.getElementById("myDIV").style.WebkitBackfaceVisibility = "visible"; // Code for Chrome, Safari, Opera
    document.getElementById("myDIV").style.backfaceVisibility = "visible";
  } else {
    document.getElementById("myDIV").style.WebkitBackfaceVisibility = "hidden"; // Code for Chrome, Safari, Opera
    document.getElementById("myDIV").style.backfaceVisibility = "hidden";
  }
}
</script>
</body>
</html>

The code above is rendered as follows: