Home How do I with the use of JavaScript and CSS transform property make an object move 20px and roll 180deg with each press of any keyboard button?

Questions

How do I with the use of JavaScript and CSS transform property make an object move 20px and roll 180deg with each press of any keyboard button?

byMR

October 18, 2022

Hello I have to make and object (in my case a circle) move 20px and roll 180 deg each time any key on my keyboard is pressed.

Can anybody help med with this?

>Solution :

// declare initial values
let pos = 0
let rot = 0

// grab the element
const circle = document.querySelector('.circle')

// add listener for keydown event
document.addEventListener('keydown', () => {
  // increase values
  pos += 10
  rot += 10

  // use translate and rotate with the current values
  circle.style.transform = `translateX(${pos}px) rotate(${rot}deg)`
})

.circle {
  border-radius: 50%;
  height: 200px;
  width: 200px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}