<!doctype html><html><meta charset=utf-8>
<meta name = "viewport" content = "width = device-width, user-scalable = no">
<style>
body {
  width: 300px;
}
div.o {
  height: 50px;
  width: 50px;
  border-radius: 50px;
  position: absolute;
  left: 150px; top: 50px;
  background: red;
  -webkit-transform-origin: 25px 100px;
}
div.b {
  position: relative;
}
.b div {
  position: absolute;
  height: 25px;
  width: 25px;
  border-radius: 25px;
}
</style>
<body>
<div class=b></div>
<div class=o></div>
<script>
var count=0;
function rnd(x) {
  count++;
  return Math.floor(Math.abs(Math.cos(count)) * x);
}
function newdiv() {
  var d = document.createElement('div');
  d.style.top = rnd(350) + 'px';
  d.style.left = rnd(275) + 'px';
  d.style.background = 'rgb(' + rnd(255) + ',' + rnd(255) + ',' + rnd(255) + ')';
  document.querySelector('.b').appendChild(d);
}
for (var i = 0; i < 1000; i++) {
  newdiv();
}

a = 0;
n = 0;
d = document.querySelector('.o');
function update(a) {
  d.style.webkitTransform = 'rotate3d(0,0,1,' + a + 'deg)';
}
function step() {
  a = (a + 3) % 360;
  update(a);
  window.requestAnimationFrame(step);
  if (a == 0) {
    n++;
    history.pushState(n, n, '/pushstate/' + n);
  }
}
step();
</script>

<body>
</html>