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 {
}
.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>
No comments:
Post a Comment