HTML | DOM Style backfaceVisibility Property Last Updated : 09 Aug, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report The backfaceVisibility property is the deciding factor that would make an element visible or invisible when the element is not facing the screen. This property is helpful when an element is rotated, and its backside needs to be hidden. Syntax: Return the backfaceVisibility property:object.style.backfaceVisibilitySet the backfaceVisibility property:object.style.backfaceVisibility = "visible|hidden|initial| inherit" Property Values: visible: The visible value is the Default value. It helps in making the backside visible.hidden: The hidden value would make the backside invisible.initial: The initial value sets this property to its default value.inherit: It is used to inherit the property from its parent element. Return Value: It returns a string, which represents the behavior of backfaceVisibility property of an element. Example-1: Sets backfaceVisibility from visible to hidden. HTML <!DOCTYPE html> <html> <head> <title> HTML DOM Style backfaceVisibility Property </title> <style> div { width: 200px; height: 200px; background: green; color: white; /* Chrome, Safari, Opera */ -webkit-animation: mymove 3s infinite linear alternate; animation: mymove 3s infinite linear alternate; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { to { -webkit-transform: rotateX(180deg); } } @keyframes mymove { to { transform: rotateX(180deg); } } </style> </head> <body> <p> Select/deselect the checkbox to change the backface-visibility of the animated element: </p> <div id="myGFG"> <h1>HEY GEEKS</h1> </div> <input type="checkbox" onclick="flip(this)" checked> backface-visibility <script> function flip(x) { if (x.checked === true) { // Code for Chrome, Safari, Opera document.getElementById( "myGFG").style.WebkitBackfaceVisibility = "visible"; document.getElementById( "myGFG").style.backfaceVisibility = "visible"; } else { // Code for Chrome, Safari, Opera document.getElementById( "myGFG").style.WebkitBackfaceVisibility = "hidden"; document.getElementById( "myGFG").style.backfaceVisibility = "hidden"; } } </script> </body> </html> Output: Before hidden: After hidden: Example-2: Sets backfaceVisibility from visible to hidden. HTML <!DOCTYPE html> <html> <head> <title> HTML DOM Style backfaceVisibility Property </title> <style> div { width: 100px; height: 100px; background: green; 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> <p> Select/deselect the checkbox to change the backface-visibility of the animated element: </p> <div id="myGFG"> <h1>GEEKS FOR GEEKS</h1> </div> <input type="checkbox" onclick="flip(this)" checked> backface-visibility <script> function flip(x) { if (x.checked === true) { // Code for Chrome, Safari, Opera document.getElementById( "myGFG").style.WebkitBackfaceVisibility = "visible"; document.getElementById( "myGFG").style.backfaceVisibility = "visible"; } else { // Code for Chrome, Safari, Opera document.getElementById( "myGFG").style.WebkitBackfaceVisibility = "hidden"; document.getElementById( "myGFG").style.backfaceVisibility = "hidden"; } } </script> </body> </html> Output: Before hidden: After hidden: Note: Chrome version (12-35), Safari new updated versions and Opera 15+ versions support an alternative property called the “WebkitBackfaceVisibility property”. Supported Browsers: The browser supported by DOM Style backfaceVisibility Property are listed below: Google Chrome 36.0 and aboveInternet Explorer 10.0 and aboveEdge 12 and aboveMozilla Firefox 16.0 and above Opera 23.0 and aboveApple Safari 15.4 and above Comment More infoAdvertise with us Next Article HTML | DOM Style borderTopStyle Property M MerlynShelley Follow Improve Article Tags : Web Technologies HTML HTML-DOM Similar Reads HTML DOM TransitionEvent The HTML DOM TransitionEvent represents events that occur when a CSS transition starts, ends, or is canceled. This event is fired at the end of a CSS transition (i.e., when the transition finishes) or when the transition is canceled. It provides information about the transition, such as the name of 2 min read HTML | DOM Style maxHeight Property The maxHeight property set/return the maximum height of an element. The maxHeight property affect only on block-level elements, absolute or fixed position elements. Syntax: It is used to set the maxHeight property:object.style.maxHeight = "none|length|%|initial|inherit"It is used to return the maxHe 2 min read HTML | DOM Style borderTopStyle Property The DOM Style borderTopStyle property is used to set or return the top border style of an element. Syntax: To get the borderTopStylePropertyobject.style.borderTopStyleTo set the borderTopStylePropertyobject.style.borderTopStyle = "none | hidden | dotted | dashed | solid | double | groove |ridge | in 7 min read HTML | DOM Style transitionDuration Property The Style transitionDuration property in HTML DOM is used to set or return the length of time(in seconds or milliseconds) to complete the transition effect. Syntax: Return the transitionDuration property:object.style.transitionDurationSet the transitionDuration:object.style.transitionDuration = "tim 1 min read HTML ondragstart Event Attribute HTML ondragstart Event Attribute is used when the user wants to drag the text or element. It is simply the process in which we press on the desired text to drag and drop them to a different location. Basically, it Initiates when the user starts dragging an element and is used to set data to be trans 3 min read HTML | DOM Style animationDelay Property The animationDelay Property in HTML DOM is used to set or returns the delay after which the animation should start. Syntax: It is used to set the animationDelay property:object.style.animationDelay = "time|initial|inherit"It is used to return the animationDelay property:object.style.animationDelay P 3 min read HTML | DOM Window parent Property HTML DOM Window parent Property returns the parent window of the current window. It is a read-only property. If a window does not have a parent, then it refers to itself. Syntax: window.parent Return Value: Parent Window object of current window. If there is no parent window then it refers to itself 1 min read HTML DOM isDefaultNamespace() Method The DOM isDefaultNamespace() method is used to return boolean true if the specified namespace is default otherwise, it returns boolean false. The URI of the namespace required can be checked using the namespaceURI string. Syntax:node.isDefaultNamespaceReturn Value: It returns a boolean value true if 1 min read HTML | DOM Style animationName Property The animationName Property in HTML DOM is used to set or returns a name for @keyframes animation. Syntax: It is used to set the animationName property:object.style.animationName = "none|keyframename|initial|inherit"It is used to return the animationName property:object.style.animationName Property V 3 min read HTML DOM Style transition Property The HTML DOM Style Property is used to change the appearance of any DIV element. It changes the appearance whenever the mouse hovers over that element. SyntaxFor return the transition property:object.style.transitionFor set the transition property:object.style.transition = "property duration timing 2 min read Like