'CSS Flip Animation to the right on button click

I am currently working on CSS that I am building on flip animation for the button. When I click on the front button, I want to flip over to the right to change over to the back button and hide the front one. When I click on the back button, I want to fli over to the right to change it to the front one and hide the back one.

Here is the full code:

<!DOCTYPE HTML>
<html>
    
<style>
        
.cI {
    width: 40px;
    height: 40px;
    display: inline-flex;
    position: absolute;
    justify-content: center;
    vertical-align: middle;
    align-items: center;
    text-align: center;
    line-height: 40px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
}

.cT {
    color: #ffff;
    font-size: 20px;
}

.cI svg {
    width: 40px;
    height: 40px;
    margin-left: 4px;
    margin-top: 2px;
}

.cI.rotated > .iconBack {
    -webkit-transform: perspective( 600px ) rotateY( -180deg );
    transform: perspective( 600px ) rotateY( -180deg );
}
.cI.rotated > .iconFront {
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
}
        
</style>

<div class="flipanimation">
    <div class="cI iconBack" style="background: #0B57CF;">
        <svg style="fill: #fff; " xml:space="preserve" enable-background="new 0 0 88 76" viewBox="0 0 88 76" height="36px" width="36px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1">
            <g transform="translate(0.000000,72.000000) scale(0.100000,-0.100000)" fill="#fff" stroke="none">
                <path d="M427 393 l-157 -158 -60 60 c-49 49 -63 58 -77 49 -9 -6 -18 -15 -20 -20 -2 -5 33 -45 77 -89 l80 -80 177 178 178 177 -20 20 -20 20 -158 -157z"></path>
            </g>
        </svg>
    </div>
    
    <div class="cI iconFront" style="background: #E631FB;">
        <span class="cT">T</span>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script type="text/javascript">
    $(".iconFront").click(function() {
        alert("button clicked");
        $(".flipanimation").toggleClass("rotated");
    });
</script>
</html>

Just like this

Here is the fiddle

When I click on the button, it will not flip over to the right to change it to the back button and the front button.

Can you please show me an example how I can flip over the button to the other button and hide it when I click on it?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'CSS Flip Animation to the right on button click

Sources

Related Questions