How to Flip an Image on Mouse Hover Using Pure CSS3 Full Project For Beginners

 

Welcome folks today in this blog post we will be flipping an image on mouse hover using pure css3. All the full source code of the application is given below.

 

 

 

Get Started

 

 

 

In order to get started you need to make a index.html file and copy paste the following code

 

 

index.html

 

 

<img width="355px;" src="test.jpg">


<style>

img {
           -webkit-transition: all .4s ease-in-out;
           -moz-transition: all .4s ease-in-out;
           -ms-transition: all .4s ease-in-out;
           -o-transition: all .4s ease-in-out;
           transition: all .4s ease-in-out
}
  img:hover {
           -moz-transform: scaleX(-1);
           -o-transform: scaleX(-1);
           -webkit-transform: scaleX(-1);
           transform: scaleX(-1);
           
       }
}
</style>

Leave a Reply