How to Flip an Image using jQuery & CSS

ByHarish Posted on

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

<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.

<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.

Live Demo

Similar Posts