Javascript DOM CSS Style backfaceVisibility Property

Introduction

Hide the backside of a rotating <div> element:

document.getElementById("myDIV").style.backfaceVisibility = "hidden";

Check/uncheck the checkbox to change the backface-visibility of the animated DIV element:

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
div {//from   www .j  a  v  a2s  .c  o  m
  width: 100px;
  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">
  <h1>Hello</h1>
</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 backfaceVisibility property defines whether or not an element should be visible when not facing the screen.

This property is useful when an element is rotated.

Property Values

Value	Description
visible	`Default`. The backside is visible
hidden	The backside is not visible
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The backfaceVisibility property returns a String representing the backface-visibility property of an element.

Previous Next