CSS backface-visibility Property

CSS backface-visibility property specifies whether the back face of an element should be visible or not when it has been rotated and facing the user.

The back face of an element is basically the mirror image of its front face. Try out the example below to see how it works:

Example:

.div1{
  backface-visibility: hidden;
}
.div2{
  backface-visibility: visible;
}

CSS Syntax

The backface-visibility property has the below syntax:

backface-visibility: visible|hidden|initial|inherit;

Property Values

The backface-visibility property accepts the following values:

visibleThis is the default value. It specifies that the back face of the element will be visible when it’s facing the user.
hiddenSpecifies that the back face of the element will be hidden.
initialSets the backface-visibility property to its default value(visible).
inheritInherits the backface-visibility property from the parent element.

General Info

Default Valuevisible
InheritedNo
JavaScript Usageelement.style.backfaceVisibility = “hidden”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts

Leave a Comment