使用 CSS3 从最后一个位置随机旋转图像

发布于 2024-12-02 05:30:00 字数 1173 浏览 3 评论 0原文

我想要一个“命运之轮”的效果。当用户单击图像时，它会从其最后位置旋转随机角度（180-540 度之间）。旋转应该用 CSS3 来完成。到目前为止，这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#pic {
    position: absolute;
    top: 200px;
    left: 200px;
}
@-webkit-keyframes spin
{
100% {-webkit-transform: rotateZ(300deg);}
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function animRes() {
  var $element = $("#pic").bind("webkitAnimationEnd", function(){
    this.style.webkitAnimationName = "";
  });
}
function doSpin() {
  animRes();
  $("#pic").css('-webkit-animation', 'spin 1s ease-out');
  $("#pic").css('-webkit-animation-fill-mode', 'forwards'); //doesn't work when using AnimRes()
}
</script>
</head>
<body>
<img id="pic" src="picture.jpg" alt="pic" onclick="doSpin();"/>
</body>
</html>

问题是：
如何随机改变关键帧中的旋转值？
如何从上次位置继续旋转？

目前 animRes() 正在重置动画，因此 -webkit-animation-fill-mode:forwards 不起作用，但如果没有 animRes() 我无法重置动画以进行更多旋转。使用 jQuery 和纯 JS 编写答案受到高度赞赏。

原文

I'd like to have a "Wheel of Fortune" effect. When user clicks the image, it rotates random degrees (between 180-540 degrees) from its last position. Rotation should be done with CSS3. Here's my code so far:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#pic {
    position: absolute;
    top: 200px;
    left: 200px;
}
@-webkit-keyframes spin
{
100% {-webkit-transform: rotateZ(300deg);}
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function animRes() {
  var $element = $("#pic").bind("webkitAnimationEnd", function(){
    this.style.webkitAnimationName = "";
  });
}
function doSpin() {
  animRes();
  $("#pic").css('-webkit-animation', 'spin 1s ease-out');
  $("#pic").css('-webkit-animation-fill-mode', 'forwards'); //doesn't work when using AnimRes()
}
</script>
</head>
<body>
<img id="pic" src="picture.jpg" alt="pic" onclick="doSpin();"/>
</body>
</html>

Problems are:
How to randomly change the value of rotation in keyframes?
How to continue rotation from its last position?

At the moment animRes() is reseting animation so the -webkit-animation-fill-mode: forwards doesn't work but without animRes() I can't reset the animation for more spins. Writing the answer with jQuery and plain JS is highly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

救星 2024-12-09 05:30:00

你需要学习一些数学知识才能实现你想要做的事情，希望它不会太难理解......

var degrees=0, seconds=0, previousRotation=0;

$("#spinner").click(function(){
 previousRotation = degrees;
 degrees+= parseInt(Math.random() * 360 + 180);
  //you should adjust this formula
   miliseconds = parseInt((degrees - previousRotation)) * 5;
    $(this).css({
        "-webkit-transform" : "rotate("+ degrees +"deg)",
        "-webkit-transition-duration" : miliseconds + "ms"
    });
});

我使用 CSS 过渡而不是动画，因为它们更简单。

如果要转换的度数更多，则毫秒 = ... 公式会使转换持续时间更长。希望您可以将所有这些集成到您已经编写的代码中。

您可以在此处查看演示：http://jsfiddle.net/XkNrf/

You need to get into some math to achieve what you want to do, hopefully it's not too difficult to understand...

var degrees=0, seconds=0, previousRotation=0;

$("#spinner").click(function(){
 previousRotation = degrees;
 degrees+= parseInt(Math.random() * 360 + 180);
  //you should adjust this formula
   miliseconds = parseInt((degrees - previousRotation)) * 5;
    $(this).css({
        "-webkit-transform" : "rotate("+ degrees +"deg)",
        "-webkit-transition-duration" : miliseconds + "ms"
    });
});

I'm using CSS Transitions instead of animations because they are more simple.

The miliseconds = ... formula makes the transition last longer if there's more degrees to be transitioned. Hopefully you can integrate all of this into the code you already wrote.

You can see a demo here: http://jsfiddle.net/XkNrf/

回复收藏 0 原文