backfaceVisibility Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:backfaceVisibility

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. backfaceVisibility

Description

The backfaceVisibility property sets whether or not an element should be visible when it is not facing the user.

Property Values

Value Description
visible Default value. 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.

Technical Details

Item Value
Default Value: visible
Return Value: A String, representing the backface-visibility property of an element
CSS VersionCSS3

Example

The following code shows how to Hide the backside of a rotating <div> element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {/* w  w w  . ja va2  s  .  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>

Related Tutorials