Js

Мячик перемещается по клику.

by akogch

HTML

<p>Click anywhere to move the ball</p>
<div id="foo"></div>

CSS

p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  -ms-transition: transform 1s;
  -o-transition: transform 1s;
  transition: transform 1s;
}

JavaScript

var f = document.getElementById("foo");
document.addEventListener(
  "click",
  function (ev) {
    f.style.transform = "translateY(" + (ev.clientY - 25) + "px)";
    f.style.transform += "translateX(" + (ev.clientX - 25) + "px)";
  },
  false,
);