在html 5画布或css3中旋转jpg

Question

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

Answer 1

您可以使用css3的动画功能：

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

只需将旋转类附加到需要旋转的每个对象上。只需更改动画持续时间属性即可使动画变慢或变快。请注意，您必须将供应商前缀"-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);
  }
}