마차 바퀴 현상 체험해보기

데모 사이트

깃허브

바퀴 등의 물체가 일정 속도 이상으로 움직이면 바퀴가 역회전하는 것처럼 보이는 현상 체험용 파일입니다.

아무래도 밝은 모니터로 보다 보니, 굉장히 빨리 회전시켜야 바퀴가 역회전하는 것처럼 보이긴 합니다.

CSS

@keyframes rotate {

to {

transform: rotate(360deg)

}

}

Javascript

const rpm = document.getElementById("rpm");

rpm.value = "30",

rpm.addEventListener("input", function () {

const tmp = this.value * 2 / 60;

document.getElementById("output").innerText = this.value * 2;

document.getElementById("rads").innerText = tmp.toFixed(2);

document.getElementById("img").style.animation = `rotate ${1 / tmp}s infinite linear`

})

이 둘만 적절히 사용해도 직접 만들어볼 수 있습니다.