图像旋转360度点击

image rotate 360 degree on click

本文关键字：360度 旋转 图像      更新时间：2023-09-26

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

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

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

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

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

当你处理click事件时，

添加动画类。

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

在animationEnd处理程序中，删除动画类(以便下次可以再次添加)，从data属性中获取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      
    });
});

对于动画类，我使用了@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); } 
}

这是一个工作的DEMO

你需要尝试使用

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

或

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

以及接下来

试一试:

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

  1. 您没有在transition中包含webkit选项(-webkit-*)

  2. 你没有包括一个非webkit选项在transform。

因此，无论您使用什么浏览器，都缺少一些东西(transform或transition)，因此代码不能在任何浏览器上工作。

edit:我注意到这不是你想要的。我不相信仅靠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>

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");
相关文章：