Post
Ask Question

Flip the Image using HTML and CSS

Flip the Image using HTML and CSS 

 
In this blog, I use Html5 with css3. here I take three class 1) flip 2)front 3)back. In flip class, I initially defined the size of box which is 200px. in flip class, I take the front and back classes.for rotation i use rotate command "rotateY(180deg)". here RotateX(180deg) can be used in the place of RotateY(180deg).initially back is hidden and when the mouse hovers on the box it flips 180 degrees and back is visible and the front is hidden.
 
CODE 
  1. <html>  
  2.     <head>  
  3.         <style type="text/css">  
  4. .flip  
  5. {  
  6. width:200px;  
  7. height:200px;  
  8. }  
  9. .flip >.front  
  10. {  
  11. background-color:#0F0;  
  12. width:200px;  
  13. height:200px;  
  14. -webkit-backface-visibility:hidden;  
  15. position:absolute;  
  16. -webkit-transform:perspective(600px) rotateY(0deg);  
  17. transition:-webkit-transform 1s linear 0s;  
  18. box-shadow:0px 10px 10px 0px #333;  
  19. }  
  20. .flip >.back  
  21. {  
  22. background-color:#009;  
  23. width:200px;  
  24. height:200px;  
  25. -webkit-backface-visibility:hidden;  
  26. position:absolute;  
  27. -webkit-transform:perspective(600px) rotateY(180deg);  
  28. transition:-webkit-transform 1s linear 0s;  
  29. box-shadow:0px 10px 10px 0px #666666;  
  30. }  
  31. .flip:hover >.front  
  32. {  
  33. -webkit-transform:perspective(600px) rotateY(-180deg);  
  34. }  
  35. .flip:hover >.back  
  36. {  
  37. -webkit-transform:perspective(600px) rotateY(0deg);  
  38. }  
  39. </style>  
  40.         <title>3d</title>  
  41.     </head>  
  42.     <body>  
  43.         <div class="flip">  
  44.             <div class="front"></div>  
  45.             <div class="back"></div>  
  46.         </div>  
  47.     </body>  
  48. </html>  
Next Recommended Reading How To Display an Image In Web Page using HTML