Question

131

image rotate 360 degree on click

rated 0 times [ 134] [ 3] / answers: 1 / hits: 18519 / 10 Years ago, fri, august 22, 2014, 12:00:00

Need your help developers,
I am using images as a menu. I just want when i click on image it rotate 360 degree and then another page is open.
i try this.

<style>

    .image {

        overflow: hidden;

        transition-duration: 0.8s;

        transition-property: transform;

    }

    .image:active {

        -webkit-transform: rotate(360deg);

    }

</style>

html:

<img class=image src=img path>

in this code image rotation is depend on click time and i want user just click once image rotate 360 degree and the link page display.
but this is not i want.
I am using jqueryMobile and phonegap

thanks in advance.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

theo

Add To Favorites

Follow

Total Points: 680

Total Questions: 108

Total Answers: 81

Location: Laos

Member since Fri, Sep 11, 2020

4 Years ago

answered 10 Years ago devonw · Accepted Answer

You can put the link url in the image as a data attribute:

<img id=theimage data-linkurl=#page2src=http://makeameme.org/media/templates/120/grumpy_cat.jpg alt=  />

Then when you handle the click event,

You add the animation class.

You add an animationEnd handler that fires when the animation is complete. Use one() instead of on() as you only want this handler to fire once.

In the animationEnd handler you remove the animation class (so you can add it again next time), get the url from the data-attribute, and then navigate to the page.

$(#theimage).on(click, function(){       

    $(this).addClass(imageRot).one('webkitAnimationEnd mozAnimationEnd oAnimationEnd msAnimationEnd animationend', function () {

        $(this).removeClass(imageRot); //remove anim class

        var url = $(this).data('linkurl'); //get url from data-attribute

        $( :mobile-pagecontainer ).pagecontainer( change, url); //navigate to page      

    });

});

For the animation class I have used @cracker's spin animation (thanks cracker!):

.imageRot {

   -webkit-animation:spin 2s ease-in-out;

    -moz-animation:spin 2s ease-in-out;

    animation:spin 2s ease-in-out;

}

@-moz-keyframes spin {

    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }

}

@-webkit-keyframes spin {

    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }

}

@keyframes spin { 

    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 

}

Here is a working DEMO