如何使用 transform-origin 转换另一个 Div 中的 Div？

Question

所以这个问题比标题中的要微妙一些。我正在尝试创建某种动画角色，因为这是我第一次使用 CSS 绘图，我想知道如何编写一种关节。

我有一个 div 是手臂，另一个 div 是第一个 div 内的前臂，因此手臂充当 parent。到目前为止一切正常，我旋转手臂，前臂随之旋转。但是，当我尝试旋转前臂时，事情变得很奇怪。我想我可以使用 transform-origin 来定位枢轴点，一切正常。

感谢任何帮助！ :)

PS。我已经链接了我的代码笔 here

.arm {
  position: absolute;
  width: 50px;
  height: 200px;
  border-radius: 50px;
  background: green;
  transform-origin: top;
}
.arm .foreArm {
  position: absolute;
  width: 50px;
  height: 200px;
  border-radius: 50px;
  background: yellow;
  transform-origin: top left;
  transform: translateY(160px);
  transform: rotate(-45deg);
}

<div class="arm">
  <div class="foreArm"></div>
</div>

Answer 1

你需要这个吗？

.arm {
  position: absolute;
  width: 50px;
  height: 200px;
  border-radius: 50px;
  background: green;
  transform-origin: top;
}
.arm .foreArm {
  position: absolute;
  width: 50px;
  height: 200px;
  border-radius: 50px;
  background: yellow;
  transform-origin: 50% 185px; /*left=50%, top= 185px = 200px - border-radius/2*/
  transform: translateY(160px);
  animation-name: myRotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes myRotate {
    0%   {transform: rotate(0deg);}
    
    100% {transform: rotate(135deg);}
}

<div class="arm">
  <div class="foreArm"></div>
</div>

如何使用 transform-origin 转换另一个 Div 中的 Div？

How do I transform a Div thats inside another Div using transform-origin?

html

css

drawing