Saturday, 3 June 2017

Division Flipper Using CSS


Division Flipper Using CSS

Girfa

Student Help

Full Code : 

<html>
<head>
    <title>Girfa : Flip Effect </title>
    <style>
        .flip-container {
     perspective: 500px;
}
     /* flip the pane when hovered */
     .flip-container:hover .flipper, .flip-container.hover .flipper {
           transform: rotateY(180deg);
     }

    .flip-container, .front, .back {
     width: 220px;
     height: 180px;
}

    .flipper {
     transition: 0.6s;
     transform-style: preserve-3d;

     position: relative;
}

    .front, .back {
     backface-visibility: hidden;

     position: absolute;
     top: 0;
     left: 0;
}

    /* front pane, placed above back */
.front {
     z-index: 2;
     /* for firefox 31 */
     transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
     transform: rotateY(180deg);
}
    </style>
</head>
<body>
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
        <div class="flipper">
            <div class="front" style="background-color:aliceblue">
                <h2 style="position:absolute;top:30%;left:28%;">Girfa</h2>
            </div>
            <div class="back" style="background-color:aqua">
                <h2 style="position:absolute;top:30%;left:20%;">Student Help</h2>
            </div>
        </div>
    </div>
</body>
</html>

Courtesy : https://davidwalsh.name/css-flip