Плавное катание и передвижение шара

Есть div , делаю эффект будто он катиться. Делаю с помощью translate и rotate.
Как достичь плавности и большей реальности в конце пути шара, что бы он плавно остановился?
И как просчитывать количество градусов, так как передвижение по оси x всегда на разные расстояние будет?
var deg = 0; var append = function() { deg = deg + 90; $("#telo").css({ "-moz-transform": " translate(350px,0) rotate(" + deg + "deg) ", "-ms-transform": "translate(350px,0) rotate(" + deg + "deg) ", "-webkit-transform": "translate(350px,0) rotate(" + deg + "deg) ", "-o-transform:": "translate(350px,0) rotate(" + deg + "deg) ", "transform": " translate(350px,0) rotate(" + deg + "deg) " }); $("#t").append(" |" + deg + "| ") } var interval = 0; $("#btn0").click(function() { interval = setInterval(append, 100); }) $("#btn1").click(function() { clearInterval(interval); }) div#telo { /*transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);*/ position: absolute; width: 95px; height: 95px; background-color: #22dd66; bottom: 100px; margin-left: 25px; transition: .7s ease; -webkit-transition: .7s ease; -moz-transition: .7s ease; -o-transition: .7s ease; border-radius: 60px; text-align: center; color: white; } .k { width: 10px; height: 20px; display: block; margin: 0 auto; background: #333; } div#planka { position: absolute; width: 350px; height: 3px; background-color: red; bottom: 100px; margin-left: 50px; z-index: 1; }

1

Ответ

Расчет градусов и расстояний
Диаметр шара - 95px. За один оборот шара его центр перемещается на длину окружности с тем же диаметром: 3,14 х 95px = 298,3px.
Один оборот - это поворот на 360deg. Поэтому рабочее уравнение:
alpha / 360 = x / 298,3
Если задан поворот на alpha градусов, то за время поворота шар прокатится на alpha * 298,3 / 360 пикселей. Если задано расстояние в x пикселей, то за время пути шар повернётся на x * 360 / 298,3 градусов.
Плавность хода
Думаю, что лучший способ - использовать в качестве transition-timing-function не linear, а ease-in на старте и ease-out на остановке.