Flip Effect Using Jquery and CSS


Guys in this post I will be discussing a way to create coin flip animation using JQuery and CSS only.
The method which I will be showcasing in a while can also be implemented without JQuery but that would increase your amount of code and complexity considerably. The main trick is to rotate the html element (an image in my case) degree by degree for multiples of 360 so that you can have your original state back.

Here is My Code :-

 
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>


<script type="text/javascript">
    
$(function(){
var $img = $("#myimg");
    
    function rotate(degree,speed,orientation) {

    $img.css({ WebkitTransform: 'rotateY('+degree+'deg)'});
    $img.css({ '-o-transform': 'rotateY('+degree+'deg)'});
    $img.css({ '-transform': 'rotateY('+degree+'deg)'});
    $img.css({ '-moz-transform': 'rotateY('+degree+'deg)'});
    
    $img.css({ '-moz-transition': speed+'s'});
    $img.css({ '-moz-transform-style': 'preserve-3d'});
    $img.css({ '-webkit-transition': speed+'s'});
    $img.css({ '-webkit-transform-style': 'preserve-3d'});
    $img.css({ '-o-transition': speed+'s'});
    $img.css({ '-o-transition-style': 'preserve-3d'});
    $img.css({ '-transition': speed+'s'});
    $img.css({ '-transform-style': 'preserve-3d'});
    
    }
    $('#rotateimgv').click(function(){
        
        $speed = 0.05;
        for($i=0;$i<=1440;$i++)
        {
            if($i % 100 == 0)
            {
                 $speed = $speed + 0.2 ;
            }
            rotate($i,$speed,'Y');
        }
        setTimeout(function(){
            $('#myimg').removeAttr('style');
        },3000);
        
    });
    
    
    
  });  
</script>

<div id='home'>
<img id='myimg' src='roundimg.png'/>
</br>
</br>
</div>
<button id='rotateimgv' >Vertical Spin</button> 
What the code does is to create a function rotate which applies rotation effects to image degree by degree and finally remove all the applied CSS after 3 seconds to rotate it again on button click.

I even control the speed of rotation to give a gradual halting effect for the animation.
The same image can be rotated in X direction by replacing rotateY with rotateX inside the rotate function.

For deeper clarifications feel free to comment.

Check out the Demo Below


9 comments:

hardik patel said...

orientation to use hi nahi hua kahi pe.
speed variable bhi delay ki tarah kaam kar raha hai na?

Ali Abbas Manager said...

Rotation Delay ko badhaya hai dhire dhire to have a slowing down effect. Orientation in the sense? X and Y ? or something else?

hardik patel said...

are "orientation" variable

Ali Abbas Manager said...

Haan woh X aur Y pass karne ke liye tha.. ie. rotationX or rotationY par phir end mein axis static rehne di. U can use like

'rotation'+orientation+'('+degree+'deg)'

DarkNet said...

hi how can i repeat flip every 6 seconds??
sorry for my bad english

Ali Abbas Manager said...

You can use setTimeout() funtion in Javascript. What you can do is actually add all of the code into javascript function (not a jquery function shown above) and call that function in setTimeout() inside document.ready

A little bit googling will give you a clearer idea

DarkNet said...

hi thanks i solve as you tell me, thi is the new code

$(function(){
$("#sottotitolo").animate({left:'+=200'},2000);

var $img = $("#myimg");

function rotate(degree,speed,orientation) {

$img.css({ WebkitTransform: 'rotateY('+degree+'deg)'});
$img.css({ '-o-transform': 'rotateY('+degree+'deg)'});
$img.css({ '-transform': 'rotateY('+degree+'deg)'});
$img.css({ '-moz-transform': 'rotateY('+degree+'deg)'});

$img.css({ '-moz-transition': speed+'s'});
$img.css({ '-moz-transform-style': 'preserve-3d'});
$img.css({ '-webkit-transition': speed+'s'});
$img.css({ '-webkit-transform-style': 'preserve-3d'});
$img.css({ '-o-transition': speed+'s'});
$img.css({ '-o-transition-style': 'preserve-3d'});
$img.css({ '-transition': speed+'s'});
$img.css({ '-transform-style': 'preserve-3d'});

}

function flipy(){

$speed = 0.05;
for($i=0;$i<=1440;$i++)
{
if($i % 100 == 0)
{
$speed = $speed + 0.2 ;
}
rotate($i,$speed,'Y');
}


setTimeout(function(){
$('#myimg').removeAttr('style');
},3000);
setTimeout(flipy , 4000);
}

flipy();




});

Luke Stone said...
This comment has been removed by the author.
tinny sharma said...

yar 3d karte to maja aa jata... mai apni website ke liye kuch aisa hi khoj raha tha

Post a Comment