HTML - DOM Style Object backfaceVisibility Property

Quiz

HTML DOM Style Object backfaceVisibility property specifies whether the element should be visible or not when it's not facing the screen. It is useful during rotation when u want to hide the backside of the element.

Syntax

Given below are the syntax to get or set the backfaceVisibility property.

Set the backfaceVisibility property:

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

Get the backfaceVisibility property:

object.style.backfaceVisibility;

Property Values

Value	Description
visible	It is the default value which sets represents backside is visible
hidden	It represents backside is not visible that is hidden.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents backface-visibility property of an element.

Example of HTML DOM Style Object 'backfaceVisibility' Property

The following example illustrates the implementstion of backfaceVisibility property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backfaceVisibility Property
    </title>
    <style>
        #origin {
            width: 400px;
            height: 300px;
            color: white;
            background-color: #04af2f;
            animation: rotation 3s infinite linear alternate;
        }
        @keyframes rotation{
            to {transform :rotatey(180deg) ;}
        }
    </style>
</head>
<body>
    <p>
        Click to change size of background image.
    </p>
    <button onclick="hide()">Hide</button>
    <button onclick="show()">Show</button>
    <div id="origin">Welcome to Tutorials Point..</div>
    <script>
        function hide() {
            document.getElementById("origin")
            .style.backfaceVisibility = "hidden";
        }
        function show() {
            document.getElementById("origin")
            .style.backfaceVisibility = "visible";
        }
    </script>
</body>
</html>

Supported Browsers

Property
backfaceVisibility	Yes 36	Yes 12	Yes 16	Yes 15.4	Yes 23

html_dom.htm

Print Page