Adding Flip Functionality

In this article we will learn about how to do add flip functionality in a Dashboard Panel. After logging into helical insight just navigate to “Dashboard Designer” as show below.

Then, on left side where we will have an option to add the HTML, CSS & Java Script coding for Customizations.

For HTML Code, Double Click on the HTML option which is under ‘Objects’ option.

Now click on Edit option to enter the HTML code then save the file.

HTML Code:

<section class="container">
    <div id="card">
        <figure class="front">
            <div>
                <h1>Hello!</h1>
                <br>
                <h2>Welcome to Front Face</h2>
            </div>
        </figure>
        <figure class="back">
            <div>
                <h1>Wow!</h1>
                <br>
                <h2>You found the Back Face!</h2>
            </div>
        </figure>
    </div>
</section>

For more styles enter the below CSS code by clicking on the CSS

CSS Code:

.container {
    width: 200px;
    height: 260px;
    position: relative;
    perspective: 800px;
}
#card {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}
#card figure {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
#card .front {
    background: red;
}
#card .back {
    background: blue;
    transform: rotateY( 180deg );
}
#card.flipped {
    transform: rotateY( 180deg );
}

Here is the output after adding CSS code

Now for Flipping Function use the below Java Script code

Java Script Code:

$('#card').on('click', function(){
    if($('#card').hasClass('flipped')) {
        $('#card').removeClass('flipped');
    }
    else {
        $('#card').addClass('flipped');
    }
});

Here is the final Output for Flipping Customization on clicking the mouse button.

For More Info, Contact us at demo@helicalinsight.com