Press "Enter" to skip to content

CSS3 image flip on page load

The HTML

The html outlines a front and back – respective to the first image that appears on page load (#front) and the second that is revealed after the flips (#back). Each front and back div contains four additional divs that specify the top right (.tr), top left (.tl), bottom right (.br) and bottom left (.bl) of the image. These separations allow us to flip one corner of the image at a time.

<div id=”wrapper”>
<div id=”front”>
<div class=”tl”><p>Dubai – 1990</p></div>
<div class=”tr”></div>
<div class=”bl”></div>
<div class=”br”></div>
</div>
<div id=”back”>
<div class=”tl”><p>Dubai – 2007</p></div>
<div class=”tr”></div>
<div class=”bl”></div>
<div class=”br”></div>
</div>
</div>

The CSS

In the CSS, we have used just two images – dubai1990.jpg and dubai2007.jpg for the front and back images. We set these two images as background images on each of the corner divs, and simply adjust the background-position of each to get the appropriate part of the image to show in each of the four boxes.

#wrapper { width: 475px; height: 275px; margin: 0 auto; position: relative; -webkit-perspective: 600; -moz-perspective: 600; -o-perspective: 600; perspective: 600;}
#front, #back { position: absolute; top: 0px; left: 0px; }
#front div, #back div { display: inline-block; width: 233px; height: 134px; background: url(‘dubai-1990.jpg’) 0px 0px no-repeat; }
#back div { background: url(‘dubai-2007.jpg’) 0px 0px no-repeat; }
/* Space out the 4 squares */
.tl, .bl { margin-right: 1px; }
.tl, .tr { margin-bottom: 1px; }

/* Adjust BG position of each square to show a different piece of the photo */
.tr { background-position: -233px 0px !important; }
.bl { background-position: 0px -134px !important; }
.br { background-position: -233px -134px !important; }

Now for the flip animation (please note for the sake of space, I have removed all the vendor prefixes in this example code. In order for this animation to work, you must add each transform property with the appropriate vendor prefix per browser. ex. -webkit, -moz, -o, etc. The full source code with vendor prefixes can be downloaded here.):

#front div {
z-index: 900;
transform: rotateY(0deg);
transform-style: preserve-3d;
transition: all .9s ease-in-out;
}
#back div {
z-index: 800;
transform: rotateY(-180deg);
transform-style: preserve-3d;
transition: all .9s ease-in-out;
}
#front .flip {
z-index: 900;
transform: rotateY(180deg);
}
#back .flip {
z-index: 1000;
transform: rotateY(0deg);
}
Let’s take a look at what this is all doing.

The z-index on each div/class makes sure the first image is on top of the second before the flip, and beneath the second image after the flip.

The transform: rotateY(0deg); specifies the state of div the before and after the flips. Before the flip, there should be no rotation on the first image – but after the flip, we have it rotating 180 degrees over the Y-axis to create the horizontal flip motion.

The transform-style: preserve-3d; preserves the perspective we defined on the #wrapper element earlier in the CSS. This gives it that 3d-look when the divs are flipping.

Finally, transition: all .9s ease-in-out; specifies the speed and duration of the flip animation.

The Javascript

The Javascript is a very brief little piece that controls the timing of each flip. It is dependent on jQuery, so be sure to add the library to your HTML file.

$(document).ready(function(){
window.setTimeout(function(){$(“#front .tl, #back .tl”).addClass(‘flip’);}, 250);
window.setTimeout(function(){$(‘#front .tr, #back .tr’).addClass(‘flip’);}, 500);
window.setTimeout(function(){$(‘#front .bl, #back .bl’).addClass(‘flip’);}, 750);
window.setTimeout(function(){$(‘#front .br, #back .br’).addClass(‘flip’);}, 1000);
});

The window.setTimeout controls the delay before each flip in milliseconds. (ie. The first flip occurs after 250ms, the second after 500ms, etc.). The flip is activated when you add the class .flip to each corner div. I am confident there is a way to condense this code and set a variable to increase the delay by a fixed amount each flip, so if anyone would like to post a more semantic solution in the comments that would be much appreciated.

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *