How To Use Style BackfaceVisibility Properties In JavaScript

Posted By Bajarangi soft , Posted On 29-09-2020

In Java Script we can rotate elements(html tags) so today we are going to discuss about css style of back face visibility properties in java script

How To Use Style BackfaceVisibility Properties In JavaScript

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, and you do not want to see its backside.

Syntax and Usage

Return the backfaceVisibility property:
object.style.backfaceVisibility

Set the backfaceVisibility property:
object.style.backfaceVisibility = "visible|hidden|initial|inherit"

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.

Return Value: A String, representing the backface-visibility property of an element.

Example(1)

<style>
    #DIV1 {
        width: 200px;
        height: 200px;
        background: orange;
        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>
<input type="checkbox" onclick="rotate(this)" checked>backface-visibility
<div id="DIV1">
    <h2>Hello</h2>
</div>
<script>
    function rotate(x) {
        if (x.checked === true) {
            document.getElementById("DIV1").style.WebkitBackfaceVisibility = "visible"; // Code for Chrome, Safari, Opera
            document.getElementById("DIV1").style.backfaceVisibility = "visible";
        } else {
            document.getElementById("DIV1").style.WebkitBackfaceVisibility = "hidden"; // Code for Chrome, Safari, Opera
            document.getElementById("DIV1").style.backfaceVisibility = "hidden";
        }
    }
</script>

In above example when i check/uncheck the checkbox to change the backface-visibility of the animated DIV element:

Complete code for Style BackfaceVisibility Properties In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Use Style BackfaceVisibility Properties In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    body{
        background: #0c0c0c;
    }
    h1,label{
        color: white;
        /*font-size: 90px;*/
    }
    #DIV1 {
        width: 200px;
        height: 200px;
        background: orange;
        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>
<body>
<div class="container">
    <br>
       <div class="text-center">
        <h1>Use Style BackfaceVisibility Properties In JavaScript</h1>
    </div>
    <br>

        <div class="col-md-4">
            <label >backface-visibility</label>
            <input type="checkbox" onclick="rotate(this)"  checked>
            <div id="DIV1">
                <h2>Hello</h2>
            </div>
        </div>

</body>
</html>
<script>
    function rotate(x) {
        if (x.checked === true) {
            document.getElementById("DIV1").style.WebkitBackfaceVisibility = "visible"; // Code for Chrome, Safari, Opera
            document.getElementById("DIV1").style.backfaceVisibility = "visible";
        } else {
            document.getElementById("DIV1").style.WebkitBackfaceVisibility = "hidden"; // Code for Chrome, Safari, Opera
            document.getElementById("DIV1").style.backfaceVisibility = "hidden";
        }
    }
</script>

Related Post