Learn how to flip an image using jQuery & CSS. In a previous tutorial, we have seen How to Zoom Image on Hover in CSS. In this jquery tutorial, we are showing an example of flip an image in a horizontal direction. We are using CSS transform property to flip an image in X-axis. We have used jQuery to set this CSS property on click event.
Example: Image Flip with jQuery & CSS
First add below Image Flip HTML & CSS code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<style> #imageBox { width: 300px; height: 180px; transition: 1.2s; transform-style: preserve-3d; position: relative; } .submitCls{ padding: 10px 20px; background: #555; border: 0; color: #FFF; display:inline-block; margin-top:50px; } </style> <div id="imageBox"> <img src="flower.jpg"> </div> <div id="flipBtn" class="submitCls"> Flip the Image </div> |
jQuery Image Flip Code Add below jQuery script code to change the image transform property on the click event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> $("#flipBtn").on("click",function() { if($("#imageBox").css("transform") == 'none') { $("#imageBox").css("transform","rotateY(180deg)"); $("#imageBox img").attr("src","flip-image.jpg"); } else { $("#imageBox").css("transform",""); $("#imageBox img").attr("src","flower.jpg"); } }); </script> |
Must add this script code after the flip image HTML code.
