Image Flip with jQuery CSS

In this tutorial we are going to see about how to flip image using jQuery and CSS. In previous tutorial we have seen various jQuery animation to rotate image.

In this example, we are flipping images in horizontal direction using 3D transform. We are using CSS transform property to flip images in X-axis. This CSS property will be set via jQuery.

View Demo


Image Flip HTML and CSS

This code shows HTML markup for the flippable image.

<div id="flip-box">
	<img src="fixed_bg.jpg">
<div id="flip-link" class="demo-submit">
	Flip the Image

and the styles are,

	#flip-box {
		width: 200px;
		height: 150px;
		transition: 0.9s;
		transform-style: preserve-3d;
		position: relative;
		padding: 10px 20px;
		background: #555;
		border: 0;
		color: #FFF;

jQuery Image Flip

This jQuery script shows how to change the image transform property on the click event. By changing transform property the image will flip back and forth. The code is,

<script type="text/javascript">
		if($("#flip-box").css("transform") == 'none') {
			$("#flip-box img").attr("src","fixed_bg1.jpg");
		else {
			$("#flip-box img").attr("src","fixed_bg.jpg");

View DemoDownload

This jQuery code tutorial was published on March 1, 2016.

↑ Back to Top