Comment transformer un thats Div à l'intérieur d'une autre Div en utilisant l'origine de la transformation?

Question

Donc cette question est un peu plus nuancée que dans le titre. J'essaie de créer une sorte de personnage animé, et comme c'est la première fois que je dessine avec CSS, je me demandais comment je pourrais programmer une sorte de joint. J'ai un div qui est le bras et un autre div qui est l'avant-bras qui est dans cette première div de sorte que le bras agit en tant que parent. Jusqu'à présent tout fonctionne, je fais tourner le bras et l'avant-bras suit. Cependant, quand je tente de faire pivoter l'avant-bras, les choses deviennent bizarres. J'ai pensé que je pourrais utiliser l'origine de transformation pour localiser le point de pivotement et les choses devraient fonctionner.

Toute aide appréciée! :)

PS. Je suis lié mon 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

Avez-vous besoin cela?

.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>