Implementation of card reversal

Idea

Sometimes we may encounter the situation that we want to show two parts of content, like a credit card or identify card. We show the number on the front of the credit card, and when turning over, we could see the signature and reminders. In web, it might be useful and applicable for content management when necessary. With the idea I figure out how to implement a card reversal with CSS3.

Code

<div class="container">    <div class="front no-reverse">Click me to turn over</div>    <div class="back reverse">Click me to turn over</div></div><style>    div {            height: 300px;            width: 400px;            font-size: 30px;            line-height: 300px;            text-align: center;        }        .front {            background: red;        }        .back {            position: relative;            top: -300px;            background: blue;            transform: rotateY(180deg);        }        .reverse {            transition: transform 2s, z-index 2s;            transform: rotateY(180deg);            z-index: -100;        }        .no-reverse {            transition: transform 2s, z-index 2s;            transform: rotateY(0deg);            z-index: 100;        }</style><script>    var isReversed = false;    function addClickEventListener() {        var container = document.querySelector(".container");        var front = document.querySelector(".front");        var back = document.querySelector(".back");        container.addEventListener("click", function(event) {                               if (!isReversed) {                front.classList.toggle("reverse");                front.classList.toggle("no-reverse");                back.classList.toggle("no-reverse");                back.classList.toggle("reverse");            } else {                front.classList.toggle("no-reverse");                front.classList.toggle("reverse");                back.classList.toggle("reverse");                back.classList.toggle("no-reverse");            }            isReversed = !isReversed;        });    }    addClickEventListener();</script>

Result

When clicking on the card, it will perform the CSS3 transition. The card will be turned over and vice versa. Pretty like the situation we turn over the card to check the information.

Analysis

There are three points to implement the reversal:
1. Define two content block(div), and shift the second one to the same position of the first one, under the first of course(lower layer, set the z-index small than the first block). Rotate the second block so that when it turn over(rotate again) we could the the content if just fine(not mirrored).
2. Set final state and add transition for the two classes: reverse and no-reverse. When added, transitions will be performed and the element will transform to the final state.
3. Change the displayed content at the right time by z-index. As we place a part of content under the other(by setting z-index), we could only display one content block any time. Then we must change the block layer if we want to display the other, otherwise, you could only see a mirrored content block no matter how you turn over the block because the second is on the layer below it(z-index is smaller). That’s why we set z-index the same value opposite to 0(100 and -100 here). When transition perform, z-index are just meet to 0 at the time the card turn 90 degrees. After that the second block(back) will come to the higher layer to display, while the first block(front) goes to lower layer and is covered by the second block).