css与js结合的时钟案例问题

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            * {
                  margin: 0;
                  padding: 0;
            }

            ul {
                  list-style: none;
            }

            #time {
                  width: 400px;
                  height: 400px;
                  border: 3px solid black;
                  border-radius: 50%;
                  margin: 30px auto;
                  position: relative;
            }

            #time ul {
                  width: 100%;
                  height: 100%;
                  position: relative;
            }

            #time ul li {
                  width: 4px;
                  height: 10px;
                  background: black;
                  position: absolute;
                  left: 50%;
                  /* margin: 0 -3px; */
                  transform: translate(-50%, -10px);
                  transform-origin: center 200px;
            }

            .shizhen {
                  width: 12px;
                  height: 60px;
                  background: black;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  /* margin: -60px 0 0 -6px; */
                  transform: translate(-50%, -60px);
            }

            .fenzhen {
                  width: 10px;
                  height: 100px;
                  background: black;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -100px);
                  /* margin: -100px 0 0 -5px; */
            }

            .miaozhen {
                  width: 6px;
                  height: 180px;
                  background: black;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -180px);
                  /* margin: -180px 0 0 -3px; */
            }

            .yuanxin {
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  background: red;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
            }

            /* #time ul li:nth-child(2){transform: rotateZ(6deg);} */
      </style>
</head>

<body>
      <div id="time">
            <ul>
                  <!-- <li></li>
                  <li></li> -->
            </ul>
            <div class="shizhen"></div>
            <div class="fenzhen"></div>
            <div class="miaozhen"></div>
            <div class="yuanxin"></div>
      </div>
      <script>
            var ul = document.querySelector("ul");
            for (var i = 0; i < 60; i++) {
                  var li = document.createElement("li");
                  li.style.transform = 'rotate(' + (i * 6) + 'deg)';
                  if (i % 5 == 0) {
                        li.style.height = '20px'
                        li.style.width = '6px'
                  }
                  ul.appendChild(li);

            }
      </script>
</body>

</html>

两个问题：

上面这段代码中，为什么我用margin就可以平移，但是用被注释起来的transform: translate(-50%, -10px);就无法移动目标？

这段代码中我给时针设置的样式宽度是6px，12点的时针刚好能对准下面的竖直向上的分针，但是如果我将宽度调节到10px，它又无法对准了，如果我将宽度调节到50px，一圈时针都从时钟圆盘中横移出去了？这是为什么？它的宽度变化不应该是由中心向两边扩散吗?

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 以帮助更多的人 ^-^