图片旋转360度

Question

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.

Answer 1

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

<img id="theimage" data-linkurl="#page2"src="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

Answer 2

try it:

<style>
  .image {
    overflow: hidden;
    -webkit-transition: transform 0.8s;
    transition: transform 0.8s;
  }

  .image:active {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
</style>

1. You didn't include a webkit option ( -webkit-* ) in transition .

2. You didn't include a non-webkit option in transform .

because of that, no matter what browser you were using, something were missing ( transform or transition ), and therefore the code didn't work on any browser.

edit : I noticed it wasn't what you were asking for. I don't believe that it can be done with CSS only. If you want, you can do it with jQuery:

<script>
  $(".image").click(function(){
    $(this).addClass("clicked").delay(800).removeClass("clicked");
  });
</script>

<style>
  .image {
    overflow: hidden;
    -webkit-transition: transform 0.8s;
    transition: transform 0.8s;
  }

  .image.clicked {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
</style>

Answer 3

you need to try using

.image {
   -webkit-animation:spin 4s ease-in-out; // No more infinite
    -moz-animation:spin 4s linear;
    animation:spin 4s linear;
}


@-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); } 

OR

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

.rotate {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 4.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-transition-timing-function: linear;
}

DEMO1

DEMO2

Answer 4

HTML

<img src = "some_image.png" alt = "test" class = "rotative" />

CSS

.canRotate
{
    -webkit-animation: FullRotation 3s ease-out;
    -o-animation: FullRotation 3s ease-out;
    -ms-animation: FullRotation 3s ease-out;
    -moz-animation: FullRotation 3s ease-out;
    animation: FullRotation 3s ease-out;
} 

@-webkit-keyframes FullRotation
{
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@-o-keyframes FullRotation
{
    from { -o-transform: rotate(0deg); }
    to { -o-transform: rotate(360deg); }
}

@-ms-keyframes FullRotation
{
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}

@-moz-keyframes FullRotation
{
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@keyframes FullRotation
{
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

JavaScript

function RotateOnClickAndOpenPage(classname, url)
{
    var elts = document.getElementsByClassName(classname);

    for(var i = 0; i < elts.length; ++i)
    {
        elts[i].onclick = function(){
            this.style.className = "canRotate";
            var that = this;
            setTimeout(function(){
                window.open(url);
                that.style.className = "cannotRotate";
            }, 3000);
        };
    }
}

// Exemple
RotateOnClickAndOpenPage("rotative", "http://www.google.fr");