2

我希望通过单击图像时触发的纯 CSS3 动画对 div 中存在的图像进行旋转动画。动画应该有特定的持续时间。

4

3 回答 3

1

我能想到的用于触发点击旋转的一种解决方案是使用复选框 hack 和关键帧动画- 请参阅DEMO

使用的 HTML：

<div class='img-container'>
    <input type='checkbox' name='t' id='t'><label for='t'></label>
    <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1998-14-i-web.jpg'>
</div>

相关CSS：

.img-container {
    position: relative;
    width: 400px;
    height: 295px;
}
.img-container input[type=checkbox] { display: none; }
.img-container input[type=checkbox] + label, .img-container img {
    position: absolute;
    min-width: 100%;
    height: 100%;
}
.img-container input[type=checkbox] + label {
    z-index: 2;
}
.img-container img { z-index: 1; }
.img-container input[type=checkbox] ~ img { animation: rev-rotate-img 1s; }
.img-container input[type=checkbox]:checked ~ img { animation: rotate-img 1s; }

@keyframes rotate-img { to { transform: rotate(360deg); } }
@keyframes rev-rotate-img { to { transform: rotate(-360deg); } }
于 2012-09-11T09:32:59.783 回答
0

嗨，现在习惯了，这对你有帮助

链接一

链接二

链接三

于 2012-09-11T05:01:11.260 回答
0

您可以通过结合@keyframesCSS3animation命令来做到这一点。一个简单的方法应该如下所示：

-webkit-animation:
    roll-over-rotate 400ms .1s 1 ease-in-out normal forwards,
    roll-over-color 1000ms ease-out;
-moz-animation:
    roll-over-rotate 400ms .1s 1 ease-in-out normal forwards,
    roll-over-color 1000ms ease-out;

@-webkit-keyframes roll-over-rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(90deg);
  }
}

@-moz-keyframes roll-over-rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(90deg);
  }
}

首先定义 webkit 动画，然后参考定义所需 CSS3 特定效果的动画函数。

对于一个活生生的例子，你应该检查这个实验的 css 部分：http ://www.hellopixel.net/experiments/javascript/worley-noise/worley.html

于 2012-09-11T05:31:05.143 回答