在 html 5 画布或 css3 中旋转 jpg答案

【问题标题】：Spinning a jpg in html 5 canvas or css3在 html 5 画布或 css3 中旋转 jpg
【发布时间】：2012-04-05 00:45:42
【问题描述】：

对于网络动画，我还是个新手，我想知道是否有人知道我如何使用 jpg 流式传输 mp3 并在单击时不断旋转。我认为它可以用 html5 画布或 css3 转换来完成？但我不知道如何执行此操作，尤其是因为我希望它不断缓慢旋转，非常感谢任何帮助！

【问题讨论】：

你需要 CSS3 动画，而不是过渡。

标签： animation html5-canvas android-animation css-transitions

【解决方案1】：

您可以使用 css3 的 animation 功能：

.spinning {
  animation-name: rotate;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

只需将 spinning 类附加到您需要旋转的每个对象。只需更改animation-duration 属性以使动画变慢或变快。请注意，您必须将供应商前缀“-moz”、“-o”、“-webkit”添加到每个 CSS3 属性。例如，对于 FF，您将需要，

.spinning {
  -moz-animation-name: rotate;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
}
@-moz-keyframes rotate {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

【讨论】：