Question

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

我有一个div是手臂，而另一个div是前臂，它位于第一个div内，因此手臂充当了父母。到目前为止一切正常，我旋转手臂，前臂跟随。然而，当我试图旋转前臂时，事情变得奇怪。我想我可以使用transform-origin来定位枢轴点，事情应该有效。

任何帮助表示赞赏！：）

PS。我已将我的codepen 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？

1 个答案: