Flip randomly images with CSS3 transition and transform:rotateY()

Random CSS3 Image Flip Effect


How to create a frontside/backside flip effect with two images and random invocations?

Use CSS3 for a flip effect has some advantages:

  • No competition with the Javascript process.
  • The flip animation is not disturbed from other executed (single-thread) Javascript code.
  • If the effect states have dependents with user interaction, like click, hover, etc. The user interaction Javascript don't affected the flip animation.

Demo: Example-Random-CSS3-Image-Flip-Effect.html

Live: m.vishuddha-zentrum.de

HTML:

We use a HTML structure with ul elements and nest two images in each li element. One image for the frontside and the other for the backside.

We use a ul/li structure with two nested images.


<ul class="flip-transition">
 <li>
   <img src="/Home-2.jpg" width="200" height="200"/>
   <img src="/Home-5.jpg" width="200" height="200"/>
 </li>
 <li>
   <img src="/Home-4.jpg" width="200" height="200"/>
   <img src="/Home-1.jpg" width="200" height="200"/>
 </li>
 ...
</ul>

CSS3:

The CSS use class selectors to assign the CSS3 attributes transform to animate the flip effect and rotate the images from rotateY(0deg) to rotateY(180deg) with transition. With backface-visibility:hidden the image backface is not shown, when it is rotated 180 degree.

CSS PlugIn:

For the vendor prefixes we use a helpfull plugin, Prefixfree.js [1] Grap it and place the script include above your Casting Stylesheets, CSS which vendor prefixes need. This is important, otherwise sideeffects can occure.

With Prefixfree.js [1] the CSS refectoring is easier, faster and not complicated with time wasting copy&past.

Include Prefixfree.js [1] for save the CSS vendor prefixes.


    <!-- place the script above the Casting Stylesheets that require vendor prefixes -->
    <script src="javascript/prefixfree.min.js"></<script>
    <style>
        .download {
           transform: rotate(15deg);
           animation: rotate;
           cursor: zoom-in;
            ...
        }

The opposed flip rotations for the front and backward image is create width the CSS2 supported :first-child [2] , which overrides the selector for the second image.

'Flip' is the initialization, 'transition' the coordination for the transion.

Rotate the images and animate the transformation with transition.


.flip li
{
    display: inline-block;
    height: 200px;
    list-style: none;
    width: 200px;
}
.flip img
{            
    backface-visibility: hidden;
    position: absolute;
    transform: rotateY(180deg);
    transition: transform 2s linear .5s;
}
    .flip img:first-child
    {                
        transform: rotateY(0deg);
    }

.transition img
{
    transform: rotateY(0deg);
    transition: transform 2s linear .5s;                    
    transform-style: preserve-3d;
}
    .transition img:first-child
    {
        transform: rotateY(180deg);
    }

jQuery:

The Javascrip toggle between two classes set for the images. From 'flip' to 'transition', means from 0 degree to 180 degree and back, the other opposed from 180 degree to 0 degree.

Set an interval to toggle the class 'transition', which effects the CSS Transition can toggle between the classes 'flip' and 'transition'.


$(document).ready(function ()
{
    /* Flip Effect */
    var jFlip = $('.flip').find('li');

    function flip()
    {
        if (jFlip.length >= 1)
        {
            var oNextImg = jFlip[Math.floor(Math.random() * jFlip.length)];
            $(oNextImg).toggleClass('transition');
        }
    }

    // loop
    $('img:first-child').on('transitionend webkitTransitionEnd 
                                    mozTransitionEnd otransition MSTransitionEnd', flip);

    // start
    window.setTimeout(flip, 500);
});

Demo: Example-Random-CSS3-Image-Flip-Effect.html

Live: m.vishuddha-zentrum.de

Use ever CSS3 with jQuery have a look to this plugin jQuery.animate-enhanced [2].


[1] Prefix-Free. Break free from CSS prefix hell! http://leaverou.github.io/prefixfree/ .

[2] Can I use ... http://caniuse.com/#search=first-child.

[3] jQuery.animate-enhanced plugin http://playground.benbarnett.net.

© Kometschuh.de | Impressum | GitHub | Facebook |