javascript 单击时图像旋转 360 度

image rotate 360 degree on click

提问by Rohit

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.

需要您的帮助开发人员，我使用图像作为菜单。我只想当我点击图像时它旋转 360 度，然后打开另一个页面。我试试这个。

<style>
    .image {
        overflow: hidden;
        transition-duration: 0.8s;
        transition-property: transform;
    }
    .image:active {
        -webkit-transform: rotate(360deg);
    }
</style>

html:

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

在此代码中，图像旋转取决于点击时间，我希望用户只需点击一次图像旋转 360 度和链接页面显示。但这不是我想要的。我正在使用 jqueryMobile 和 phonegap

thanks in advance.

提前致谢。

回答by ezanker

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

您可以将链接 url 作为数据属性放在图像中：

<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.

您添加一个 animationEnd 处理程序，该处理程序在动画完成时触发。使用 one() 而不是 on() 因为您只希望此处理程序触发一次。

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.

在 animationEnd 处理程序中，您删除动画类（以便下次可以再次添加），从数据属性中获取 url，然后导航到页面。

$("#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!):

对于动画类，我使用了@cracker 的旋转动画（感谢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

这是一个工作演示

回答by GINCHER

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.

1. 您没有-webkit-*在transition.

2. 您没有在transform.

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

因此，无论您使用什么浏览器，都缺少某些内容（transform或transition），因此代码在任何浏览器上都不起作用。

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:

编辑：我注意到这不是你要的。我不相信它只能用 CSS 来完成。如果你愿意，你可以用 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>

回答by cracker

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

演示1

DEMO2

演示2

回答by Imagine Breaker

HTML

HTML

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

CSS

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

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");