Flip 3D transisition using css3

        Flip 3D transition using css3

hello guys ,today i,m going to discuss how to flip a division using css3.

well for in css3 we have rotation and perspective properties which we are going to use.

here is the html code >>>>

<div class="flipover">

<div class="answer"><h1>A newbie web developer </h1>

 <p> 

write anything here you want .you can also include images here.</p></div>

<div class="question"><h1>Rohit kumar</h1>

  <img src="rohit.jpg" width="500" height="500" alt="wrong"></div>

</div>

and now it's time for adding some style

here is the css code >>>

<style type="text/css">

    .flipover{ width:600px; height:600px; margin:100px 100px; float:center;

}

.flipover .question{ position:absolute; padding:10px;

width:600px; height:600px; 

text-align:center;

background:#FF9; border-radius:8px;

-webkit-transform: perspective(600px) rotateY(0deg);

transform: perspective(600px) rotateY(0deg);

-webkit-backface-visibility:hidden;

backface-visibility:hidden;

transition: -webkit-transform .5s ease-out ;

transition: transform .5s ease-out ;

}

.flipover .answer{ position:absolute; padding:10px;

width:600px; height:600px;

text-align:center;

background:#fcc; border-radius:8px;

-webkit-transform: perspective(600px) rotateY(180deg);

transform: perspective(600px) rotateY(180deg);

-webkit-backface-visibility:hidden;

backface-visibility:hidden;

transition: -webkit-transform .5s ease-out ;

transition: transform .5s ease-out ;

}

  .flipover:hover .question{

-webkit-transform: perspective(600px) rotateY(-180deg); 

transform: perspective(600px) rotateY(-180deg); 

  }

  

   .flipover:hover .answer{

 -webkit-transform: perspective(600px) rotateY(0deg); 

 transform: perspective(600px) rotateY(0deg); 

  } 

  

p{

font-size:22px;

font-family:"Times New Roman", Times, serif;

line-height:25px;}

   </style>

check the demoDEMO

i hope you enjoy this!