Coding for Flip Box

-
Flip Box

Below coding shows the flip box using hover:

 <html>
<head>
<style>
.flip{ width:240px; height:200px; margin:10px; border-radius:20px;}

 .flip > .front{
position:absolute;
transform: perspective( 600px ) rotateY( 0deg );
background:lightblue; width:240px; height:200px; border-radius: 40px;
backface-visibility: hidden;
transition: transform .5s linear 0s;
}
.flip > .back{
position:absolute;
transform: perspective( 600px ) rotateY( 180deg );
background: brown; width:240px; height:200px; border-radius: 40px;
backface-visibility: hidden;
transition: transform .5s linear 0s;
}
.flip:hover > .front{
transform: perspective( 600px ) rotateY( -180deg );
}
.flip:hover > .back{
transform: perspective( 600px ) rotateY( 0deg );
}
</style>
</head>
<body>
<h2>Move mouse over box</h2><br>

 <div class="flip">
  <div class="back"><br><br><br><p id="1"><Center><h2>Student Corner</h2></center></p></div>
  <div class="front"><br><br><br><p><Center><h2>Digital Corner</h2></center></p></div>
</div>
</body>
</html>

 Output of Coding:



Note:- This coding is not for copyright otherwise action will be taken.

 Follow on: http://www.facebook.com/4yaak

Comments

Post a Comment