css z-index with multiple layers

pol's solution do works, thx alot.

But as you mentioned, I cant access them because they are overlap.

(function() {
  'use strict';

  for (var i = 0; i < 60; i++) {
    var dotContainer = document.createElement('span');
    var dot = document.createElement('span');
    var d = document.createElement('span');

    $(d).appendTo(dot);
    $(dot).appendTo(dotContainer);
    $(dotContainer).addClass('dot-container');
    $(dotContainer).appendTo('body');
  };

  var dots = $('.dot-container'),
    deg = 45;

  for (var i = 0; i < dots.length; i++) {
    (function(index) {
      setTimeout(function() {
        $(dots[index]).css({
          transform: 'translate(-50%, -50%) rotate(' + deg + 'deg)'
        });

        deg += 360 / 60;
      }, index * 10);
    })(i);
  };

})();

.dot-container {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid red;
}

span span {
  background: gold;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
  z-index: 100;
}

span span:hover {
  background: green;
}

div {
  border: 1px solid red;
}

.a {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0px;
  left: 0px;
}

.b {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0px;
  left: 0px;
}

.c {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0px;
  left: 0px;
}

div div {
  position: absolute;
  height: 10px;
  width: 10px;
  z-index: 100;
}

div div:hover {
  background: green;
}

.a div {
  background: red;
  left: 0px;
  top: 0px;
}

.b div {
  background: red;
  right: 0px;
  top: 0px;
}

.c div {
  background: red;
  right: 45px;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <div></div>
</div>
<div class="b">
  <div></div>
</div>
<div class="c">
  <div></div>
</div>

I made another one with actually dom element,

and as the old one, I made their z-index as 100.

I also made a ovelaped square div set which are also overlaped and works well...

So, what makes the overlaped rim goes wrong?

Is it because of translate()?

I modified your code to make the index-z variable but using your method always the last 15 elements will cover the previous 45 because you are using dots in the top-left part of the span squares 200x200 (15*4). Therefore, all only the last 15 elements are visible.

If move the rotation point to the bottom and change the squares spans into a rectangle 15x200 like this:

Note: I'm using the same with as the dots have (15px).

(function() {
  'use strict';

  for (var i = 0; i < 60; i++) {
    var dot = document.createElement('span');
    document.getElementsByTagName("body")[0].appendChild(dot);
  }

  var dots = document.querySelectorAll('span'),
    deg = 45;

  var index = 0;
  if (dots) {
    dots.forEach(function(element) {
      index++
      setTimeout(animate.bind(null, element, index), index * 10);
    });
  }

  function animate(element, count) {
    element.style.transform = 'translate(-50%, -50%) rotate(' + deg + 'deg)';
    deg += 360 / 60;
    element.classList.add('span-animate');
    element.style.zIndex = count;
  }

  /*for (var j = 0; j < dot.length; j++) {
    (function(index) {
      setTimeout(function() {
        dot[index].style.transform = 'translate(-50%, -50%) rotate(' + deg + 'deg)';
        deg += 360 / 60;
        dot[index].classList.add('span-animate');
      }, index * 10);
    })(j);
  };*/

})();

span {
  height: 200px;
  width: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom;
  transform: translate(-50%, -50%) rotate(45deg);
}

span:after {
  cursor: pointer;
  content: "";
  height: 15px;
  width: 15px;
  background: gold;
  display: block;
  border-radius: 50%;
  transition: 0.3s ease-in-out;
  position: absolute;
  top: 0px;
  left: 0px;
}

.span-animate:after {
  height: 8px;
  width: 8px;
}

<body>
</body>