HTML Javascript 그림 회전시키기

CSS 애니메이션을 이용해서 그림 회전시키기를 해봤습니다. 그림의 캐릭터는 토르와 칸나입니다. 그림은 고바야시네 메이드래곤 S 공식 홈페이지에서 퍼왔습니다.

<!DOCTYPE html>

<style>
@keyframes rotate {  
  to { transform: rotate(360deg); }
}
#img1 {
  animation: rotate 5s linear infinite;  
}
</style>

<button onclick="speedChange(0)">정지</button>
<button onclick="speedChange(1)">느림</button>
<button onclick="speedChange(2)">빠름</button>
<button onclick="picChange()">그림</button>

<div style="text-align: center; overflow: hidden;">
  <img id="img1" src="pics/torr.png">
</div>

<script>

var imgSrc = "pics/kanna.png";

function speedChange(v) {  
  var img = document.getElementById("img1");  
  if (v == 0) {
    img.style.animationPlayState = "paused";
  } 
  else {
    img.style.animationPlayState = "running";
    img.style.animationDuration = {1:"5s", 2:"1s"}[v];
  }
}

function picChange() {
  var img = document.getElementById("img1");
  var temp = img.src;
  img.src = imgSrc;
  imgSrc = temp;
}

</script>