best websites of the world

FRONT END DEVELOPER/
WEB DEVELOPER/
WEB DESIGNER/
LONDON/ SURREY/

How to flip a div with css3 and jQuery – Tutorial

logo front
logo back

Recently I have had many comments on how I create the flipping logo at the top of this website. If you haven’t seen the effect just hover over the badge below the title. It’s fairly simple to do with CSS3 so I have written this tutorial so you guys can see how it’s done.

Planning

First of all lets just talk about the theory of what we are going to do. We need two divs that hold the two images, for the tutorial I am just going to use my logo. We need to absolutely position the divs so they are “stacked: directly on top of each other so it looks like there is only one logo. Then the magic of CSS3 transitions and transforms will give us the final effect with a little help from jQuery. Lets get started.

HTML

The following html has a container div then two divs inside it which hold the two images. The idea is that the div class “back” will be positioned behind the div with class “front”. We will then flip the divs so that the front becomes the back and the back becomes the front, with me so far?

<div class="hover panel">
	<div class="front">
		<div class="pad">
			<img src="http://simonlockyer.info/wp-content/themes/DOD_BLANK/images/logo-front.png" alt="logo front" />
		</div>
	</div>
	<div class="back">
		<div class="pad">
			<img src="http://simonlockyer.info/wp-content/themes/DOD_BLANK/images/logo-back.png" alt="logo back" />
		</div>
	</div>
</div>

CSS

The CSS is the really important part in this and actually its really simple.  We first make sure the divs with the images are stacked perfectly on top of each other. Like so:

.panel {
	margin: 0 auto;
	width: 130px;
	height: 130px;	
	position: relative;
	font-size: .8em;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
}
.panel .front {
	position: absolute;
	top: 0;
	z-index: 900;
	width: inherit;
	height: inherit;
	text-align: center;
}
.panel .back {
	position: absolute;
	top: 0;
	z-index: 800;
	width: inherit;
	height: inherit;
}

We then need to bring it all together and add the css3 rotation values to make the divs flip. As I wanted the image to flip horizontally we only need to modify the Y axis values (its quite fun to play with both the X and Y axis values to see what effect you can come up with).

First of all the front div we need to se the Y axis value to 0 as its being shown. The back div we need to set to be -180 as we are only flipping the div half way round to show the other.

Then its very easy to add the effect, just reverse the rotation values, so the back’s Y value becomes 0 and the front divs Y value becomes -180. It may sound confusing but its very easy. See below for the all of the CSS.

.panel {
	margin: 0 auto;
	width: 130px;
	height: 130px;	
	position: relative;
	font-size: .8em;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel .front {
	position: absolute;
	top: 0;
	z-index: 900;
	width: inherit;
	height: inherit;
	text-align: center;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.panel.flip .front {
	z-index: 900;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.panel .back {
	position: absolute;
	top: 0;
	z-index: 800;
	width: inherit;
	height: inherit;
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;

	-moz-transform: rotateY(-180deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.panel.flip .back {
	z-index: 1000;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
}

 

jQuery

All we need to add now is the jQuery that adds the class “flip” to the first div. This actives the css3 code and makes the div flip, like so:

<script type="text/javascript">
  		$(document).ready(function(){
  		   // set up hover panels
  		   // although this can be done without JavaScript, we've attached these events
  		  // because it causes the hover to be triggered when the element is tapped on a touch device
  		$('.hover').hover(function(){
  			$(this).addClass('flip');
  		},function(){
  			$(this).removeClass('flip');
  		});
  	});
 </script>

Round Up.

Really the effect is very simple. But I love minimalist design so little effects like this that aren’t always noticed but add a bit of flare are a great addition.  The full page of HTML and CSS is below. If anyone needs the files just drop me a message.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flip the div</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  	<script type="text/javascript">
  		$(document).ready(function(){
  			// set up hover panels
  			// although this can be done without JavaScript, we've attached these events
  			// because it causes the hover to be triggered when the element is tapped on a touch device
  			$('.hover').hover(function(){
  				$(this).addClass('flip');
  			},function(){
  				$(this).removeClass('flip');
  			});
  		});
  	</script>
	<style>
		.panel {
			margin: 0 auto;
			width: 130px;
			height: 130px;	
			position: relative;
			font-size: .8em;
			-webkit-perspective: 600px;
			-moz-perspective: 600px;
		}
		/* -- make sure to declare a default for every property that you want animated -- */
		/* -- general styles, including Y axis rotation -- */
		.panel .front {
			position: absolute;
			top: 0;
			z-index: 900;
			width: inherit;
			height: inherit;
			text-align: center;
			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;
			-moz-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;
			/* -- transition is the magic sauce for animation -- */
			-o-transition: all .4s ease-in-out;
			-ms-transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
		}
		.panel.flip .front {
			z-index: 900;
			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
		}
		.panel .back {
			position: absolute;
			top: 0;
			z-index: 800;
			width: inherit;
			height: inherit;
			-webkit-transform: rotateY(-180deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			-moz-transform: rotateY(-180deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;
			/* -- transition is the magic sauce for animation -- */
			-o-transition: all .4s ease-in-out;
			-ms-transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
		}
		.panel.flip .back {
			z-index: 1000;
			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform: rotateX(0deg) rotateY(0deg);
		}
	</style>
</head>
<body>
	<div class="hover panel">
		<div class="front">
			<div class="pad">
				<img src="http://simonlockyer.info/wp-content/themes/DOD_BLANK/images/logo-front.png" alt="logo front" />
			</div>
		</div>
		<div class="back">
			<div class="pad">
				<img src="http://simonlockyer.info/wp-content/themes/DOD_BLANK/images/logo-back.png" alt="logo back" />
			</div>
		</div>
	</div>

</body>
</html>

Search

Social

42 Comments


  • Guy - June 17, 2013

    hey, will this work on a .click event? I tried replacing .hover with .click but the animation didn’t work.


    • admin - July 9, 2013

      Hi there,

      Sorry for the delay i was on a rare holiday. Yes it will work on any jQuery event handler. All the jQuery does is add a class to the div. Try looking at this documentation http://api.jquery.com/on/. If you write the jQuery to instead add a class add an alert so you can see if the click is firing an event. I would think that your on click event isn’t firing right. Send me your code if you get really stuck and i will take a look.

      Simon


    • Oscar - May 12, 2014

      I could make this thing works with a click event…. I just added a comparison: if the ‘flip’ class exists, then remove it.
      If you wish I can upload the code lines….
      Greetings!!


    • JitinG - February 21, 2016

      Try this code –
      $(‘.hover’).on(‘click’, function(){
      $(this).toggleClass(‘flip’);
      });


  • Stewart - June 27, 2013

    Hi Simon,

    Love the tutorial. I’ve tried implimenting it on a redesign of my home page to have flipping tiles but I’m having trouble aligning the the tiles in 2 rows of 3. They just line up in the centre of the screen. I can’t get any container divs to arrange them. I’m pretty sure it’s because of the positioning of the image ontop of the other. Do I need to create seperate rules for each different tile and then set the position in each one?

    Many thanks

    Stewart


    • admin - July 9, 2013

      Hi Stewart,

      Sorry for the delay, i was on holiday. Can you send me a link to your project? Sounds to me that its todo with the div positioning. You shouldn’t really need to create separate rules for title, but it will probably solve your issue. Let me know if you need me to take a look at it for you.

      Simon


      • Stewart - July 9, 2013

        Hi Simon,

        No problem for the late reply. I actually woke up later that night and realised that positioning it inside a table would solve the issue.

        Here is the result http://csgconsult.com/dev/fliptest.html I added a reflect effect that mirrors the flip. The right hand section will work as a slider but I’m still working on that.


  • Dave McDonald - July 1, 2013

    I would like to use your logo flip effect. I should be able to copy and paste and insert my images. However, is there a way that you could explain to me how to alter the code so that the effect will only happen when a link is clicked such as “click here to flip”

    Thanks for your help
    Dave


    • admin - July 9, 2013

      Hi Dave,

      Sorry i haven’t got back to you i was on holiday. I am going to assume that you have implemented the code i have given you and it works. The bit that you need to concern yourself with is the jQuery function that at present executes when you hover over the div. All this does is it adds a class to the div, the css then takes care of the rest. So instead of using $(‘.hover’).hover(function(){}) you could use the “on click” event jQuery handler, the documentation is here http://api.jquery.com/on/. You just have to make sure that the jquery executed on a click and adds a class to the hover div. If you are struggling i could quickly make this example for you and send it over so you can see how its done.

      I hope this helps,

      Simon


      • Dave McDonald - July 16, 2013

        Simon, it is a card game that I want to create. The images I will be using are playing cards that will flip over. I have been able to replace your logo with an ace of spades and it works fine. I looked at http://api.jquery.com/on/ and quite frankly, it is a bit over my head. I am good at copying and pasting and then some modifying of code, so just a bit more help will allow me to continue on my project which has been put on hold while seeking more help. Again, I need to click a text link to flip the card instead of hovering over it.

        Thanks,
        Dave
        justdave@comcast.net


  • Hugo - July 22, 2013

    Hi Simon,

    thank you for your tutorial. I’m trying to implement it but I have a small problem with Firefox. In Chrome or Safari the animation in the front panel goes from right to left and the back, but in Firefox the front panel goes the other was around ( from left to right) and the back panel from right to left. It looks very extrange. Do you had some similar problems like me? Am I doing something wrong?

    Thank you in advance for your support.


    • admin - August 30, 2013

      Hi Hugo, Sorry for the delay. Could you give me some more details, which version etc.

      Simon


  • Hugo - July 22, 2013

    I’m sorry for the estrange english in my previous comment. Seems like my word spelling is correcting me wrong 😉


  • Karthik - July 23, 2013

    Will this work in all Browsers? Mainly in Safari and InternetExplorer?


    • admin - August 30, 2013

      Hi, please se my comment to Sagive below. I hope this helps.

      Simon


  • Sagive - August 8, 2013

    Thanks mate… love it – easy to implement and ez to use… would defenitly credit you in my upcoming article.

    Got any idea on browser support? which / ver etc?


    • admin - August 30, 2013

      Hi there, sorry it has taken me so long reply, i have been away. So basically these are my thoughts on browser compatibility:

      In older browsers i would suggest you use jQuery Flip. Use Modernizr is to detect support for 3D transforms and if not, the markup is altered to fit how jQuery flip requires it to be. The key part is that for normal browsers, normal 3D transforms are used, with none of the fluff required to get this to work.

      Due to issues with getting jQuery flip to work on hover, the behaviour can be changed to work on click.

      Using this technique, the effect works on all browsers in use, back to IE6. The flip effect is of much higher quality on browsers that support 3D transforms, but still has the distinctive look and feel on older browsers.

      Cheers


  • h - August 30, 2013

    hi there nice tutorial.

    thank you,


  • fren - February 20, 2014

    Great!! Copy & paste and it works as expected. Thankyou very much 😉


  • pradeep - March 6, 2014

    How can i emulate the same effect for IE9 and above browsers?


  • cholasimmons - May 11, 2014

    I’ve been looking for this effect! Thank you! How can I make the flip look abit more 3D? (Example can be seen somewhere on RedChemistry.com)
    The current code makes the flip look very orthographic..


  • Freezystem - May 27, 2014

    if you don’t want to use any javascript you can do like that ; http://jsfiddle.net/freezystem/KcTYs/1/


  • Mr. E - June 28, 2014

    Really great tutorial and I am glad I found it. This has saved me hours of try and error situations 🙂

    Appreciate it.

    Regards,
    Erik


  • Jon - October 22, 2014

    Thanks for the code for anyone else finding using this, the same effect can be achieved without any JavaScript by making the following changes to the CSS:

    .flipper.flip .back -> .flipper:hover .back
    .flipper.flip .front -> .flipper:hover .front


  • Fredrik - November 19, 2014

    Great tutorial! Thanks you Simon!

    Any code you can send me to get the .click function to work? I have tried a few and to me the .click function should work 🙂

    $(‘.hover’).click(function(){
    $(“.hover”).on(“click”, function(){
    $(‘.hover’).on(‘click’, function(){

    Nothing.


    • Mitali - March 1, 2016

      I still did not understand how to do it onclick.


    • Mitali - March 1, 2016

      I dont want the image to flip onhover. I want it to flip on button click. Button will be below it


  • Fredrik - November 19, 2014

    I got it.

    $(document).ready(function(){
    $(“.hover”).click(function(){
    $(this).toggleClass(‘flip’);
    });
    });

    Very nice!


    • Larry - March 12, 2016

      Thank you!!!!


  • Skip - December 22, 2014

    Hi Simon, this looks great. I have one question. I’m on a touch device and when I tap it flips beautifully. However that’s all it does. If I tap it again it would be ideal if it flipped back again. Is there an easy edit to achieve this?


  • Anna - January 8, 2015

    Hiya!

    Great tutorial but do you reckon you could help me with an issue I am having? I got every part of it to work save for the images being directly on top of each other, my code is identical to yours for that part except I added width and height to the img src, and that makes the image stacking slightly off. Any ideas on how I can fix this?

    Thanks in advance!

    Anna


  • Kristian Brimble - February 17, 2015

    This is a great tutorial and is a much better solution than a lot of the jQuery plugins that I tired.
    It’s relatively browser compatible with minimal Javascript too!

    Thanks a lot!


  • Dave - March 12, 2015

    Hello,

    here is the css for ie10 support :

    .panel {
    margin: 0 auto;
    width: 220px;
    height: 220px;
    position: relative;
    font-size: .8em;

    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
    }
    /* — make sure to declare a default for every property that you want animated — */
    /* — general styles, including Y axis rotation — */

    .panel .front {
    position: absolute;
    top: 0;
    z-index: 900;
    width: inherit;
    height: inherit;
    text-align: center;

    transform: rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;

    -ms-transform: rotateX(0deg) rotateY(0deg);
    -ms-transform-style: preserve-3d;
    -ms-backface-visibility: hidden;

    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;

    /* — transition is the magic sauce for animation — */

    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;

    }
    .panel.flip .front {
    z-index: 900;
    transform: rotateX(0deg) rotateY(180deg);
    -ms-transform: rotateX(0deg) rotateY(180deg);
    -webkit-transform: rotateX(0deg) rotateY(180deg);
    -moz-transform: rotateX(0deg) rotateY(180deg);
    }
    .panel .back {
    position: absolute;
    top: 0;
    z-index: 800;

    width: inherit;
    height: inherit;

    transform: rotateX(0deg) rotateY(-180deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;

    -ms-transform: rotateX(0deg) rotateY(-180deg);
    -ms-transform-style: preserve-3d;
    -ms-backface-visibility: hidden;

    -webkit-transform: rotateX(0deg) rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

    -moz-transform: rotateX(0deg) rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;

    /* — transition is the magic sauce for animation — */

    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;

    }
    .panel.flip .back {
    z-index: 1000;
    transform: rotateX(0deg) rotateY(0deg);
    -ms-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
    }

    IE 10 need both rotateX and rotateY value to animate properly


    • Mitali - March 1, 2016

      My code is similar to yours. still not working for IE
      .container {
      width: 453;
      height: 453;
      position: relative;
      -webkit-perspective: 800px;
      -moz-perspective: 800px;
      -o-perspective: 800px;
      -ms-transition: 800px;
      perspective: 800px;
      }
      .card {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 5s;
      -moz-transition: -moz-transform 5s;
      -ms-transition: all .4s ease-in-out;
      -o-transition: -o-transform 5s;

      transition: transform 1s;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transform-origin: 50% 50%;
      }
      .card div {

      display: block;
      height: 100%;
      width: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 140px;
      position: absolute;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
      }
      .card .front {

      }
      .card .back {
      -webkit-transform: rotateY( 180deg );
      -moz-transform: rotateY( 180deg );
      -o-transform: rotateY( 180deg );
      -ms-transform: rotateX(0deg) rotateY(180deg);
      transform: rotateY( 180deg );
      }
      .card.flipped {
      -webkit-transform: rotateY( 180deg );
      -moz-transform: rotateY( 180deg );
      -ms-transform: rotateX(0deg) rotateY(180deg);
      -sand-transform: rotate(180deg);
      -o-transform: rotateY( 180deg );
      transform: rotateY( 180deg );
      }


  • Matt - March 16, 2015

    Hey!

    I have this working on hover-but—NOT on click-which is what I would like. Please help!
    Trying this in my .js file and it’s not working:

    $(document).ready(function(){
    $(“.hover”).click(function(){
    $(this).toggleClass(‘flip’);
    });
    });


    • Lukasz M - December 8, 2015

      Hi Matt,

      I know this is super late for you, but hope this helps someone in the future:

      $(‘.hover’).click(function(){
      // check to see if class .flip exists aready
      if ($(this).hasClass(‘flip’)) {
      $(this).removeClass(‘flip’);
      } else {
      $(this).addClass(‘flip’);
      }
      });


  • amine - March 18, 2015

    A working flipping effect working in IE firefox and chrome is visible here http://www.seeveeze.com


  • Jeff - June 30, 2015

    Hello,
    Very nie ans effective tut, I just have a trouble with the flip effect on 3 div that are align by float left. The div don’t flip at all. Can you give me a hand ?
    Thank you.


  • Mathias - July 16, 2015

    Awesome thanks a lot!! just what i needed


  • pritesh - January 3, 2016

    i need it as automatic flipping. how can i do that.


  • Alvaro - February 26, 2016

    This is a long shot, but I don’t know if you’re still answering to this. I wanted to use this effect for a website i’m developing, I have tiles that show a title and in the back there should be an explanation, When I make the tile flip the back is hidden, do you think you can tell me what’s wrong?

    This is the url of the code pen.

    http://codepen.io/alvaro911/pen/bpbQZY

    Thank you.


  • masum - March 25, 2016

    easy to implement. thanks developer.

Post a Comment

Your email is kept private. Required fields are marked *