How do I with the use of JavaScript and CSS transform property make an object move 20px and roll 180-CodePudding

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

Can anybody help with this?

CodePudding user response：

// 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;
}

<div >text</div>