Sample Code - HTML Flip Effect

[HTML] HTML Flip Effect
<html>
<head>
    <style>
        .flip-container {
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .flip-container:hover .flipper, .flip-container.hover .flipper {
            transform: rotateY(-180deg);
        }

        .flip-container, .front, .back {
            width: 640px;
            height: 480px;
        }

        .flipper {
            transition: 0.5s;
            transform-style: preserve-3d;
            position: relative;
        }

        .front, .back {
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }

        .front {
            transform: rotateY(0deg);
            background-color: #b0b0b0;
        }

        .back {
            transform: rotateY(180deg);
            background-color: #a0ffa0;
        }

    </style>

</head>
<body>
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
        <div class="flipper">
            <div class="front">
                Front
            </div>
            <div class="back">
                Back
            </div>
        </div>
    </div>
</body>
</html>