Html 变换原点css移动，同时以循环方式旋转

我已经创建了轮子和一只手，它将根据通过的角度在轮子上旋转

我已经改变了角度，让它更像时钟的秒针

transform-origin:100% 80%;

但在旋转时，它会移动半径，还是我也要平移

CSS:

.wheel {
  background: white;
  width: 400px;
  height: 400px;
  border-radius: 200px;
  position: relative;
/*   display:inline-block; */
  margin:20px auto;
}
/* wheel center */
.wheel:after {
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  background:rgba(200,0,0,0.8);
  border-radius:10px;
  left:50%;
  top:50%;
  margin-left:-5px;
  margin-top:-5px;
}


.hand {
  width: 4px;
  height: 55%;
  background: tomato;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left:-2px;
  margin-top:-45%;
  transform: rotate(90deg);

  /* shifted */
  transform-origin:100% 80%;
  border-radius:4px;
}
.hand:after {
  content:'';
  position:absolute;
  width:10px;
  background:blue;
  height:10px;
  top:80%;
  left:80%;
  margin-top:-3px;
  margin-left:-6px;
  border-radius:100%;
}

HTML:

<div class="wheel">
  <div class="hand"></div>
</div>

链接：

---

我已经在translateY的帮助下修复了它，而不是更改最高值

因此，我更新的代码是CSS：

.wheel {
  background: white;
  width: 400px;
  height: 400px;
  border-radius: 200px;
  position: relative;
/*   display:inline-block; */
  margin:20px auto;
}
/* wheel center */
.wheel:after {
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  background:rgba(200,0,0,0.8);
  border-radius:10px;
  left:50%;
  top:50%;
  margin-left:-5px;
  margin-top:-5px;
}

.hand {
  width: 4px;
  height: 55%;
  background: tomato;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left:-2px;
  margin-top:-55%;
  transform: rotate(0deg) translateY(40px);

  /* shifted */
  transform-origin:50% 100%;
  border-radius:4px;

  animation: rotate-me2 5s linear infinite;
}
.hand:after {
  content:'';
  position:absolute;
  width:10px;
  background:blue;
  height:10px;
  top:80%;
  left:80%;
  margin-top:-3px;
  margin-left:-6px;
  border-radius:100%;
}
@keyframes rotate-me {
  100% {transform:rotate(360deg) translateY(40px);}
}

更新链接为：

---

是否有必要使用html元素并最终移动它们？我这样问是因为有很多方法可以用，比如说，一个元素来完成。你的意思是这两个点也是红色和蓝色移动的吗？@VilleKoo红色点是圆心，蓝色是移动的，因为它在手边。嗯，那么我不太确定问题是什么：/请看行动@VilleKoo