How do I join the normal (horizontal) and rotated lines end at the same point in HTML and CSS?

To make a thigh, leg and ankle like structure as thick lines. I should rotate it using animation, but they are rotating in the manner such that they are at different points. But I want the joints between the lines should be the same as the knee joint, hip joint.

I have included the code that I tried.

<title> Stick Animation </title>

<style>
    body {
        font-family: monospace;
        align-content: center;
        text-align: center;
        padding: 20px;
        padding-top: 200px;
    }


    .thigh {
        height: 5px;
        width: 200px;
        position: relative;
        background-color: black;
        display: inline-block;
        transform-origin: right;
        animation-name: leg;
        animation-duration: 1s;
        animation-iteration-count: 10;
        animation-direction: alternate-reverse;
    }

    @keyframes thigh {
        from {
            transform: rotate(120deg);
        }

        to {
            transform: rotate(100deg);
        }
    }

    .leg {
        height: 5px;
        width: 170px;
        position: relative;
        background-color: black;
        display: inline-block;
        transform-origin: left;
        animation-name: leg;
        animation-duration: 1s;
        animation-iteration-count: 10;
        animation-direction: alternate-reverse;
    }

    @keyframes leg {
        from {
            transform: rotate(120deg);
        }

        to {
            transform: rotate(0deg);
        }
    }

    .ankle {
        height: 5px;
        width: 50px;
        position: relative;
        background-color: black;
        display: inline-block;
        transform-origin: left;
        animation-name: ankle;
        animation-duration: 1s;
        animation-iteration-count: 10;
        animation-direction: alternate-reverse;
    }

    @keyframes ankle {
        from {
            transform: rotate(60deg);
        }

        to {
            transform: rotate(0deg);
        }
    }

</style>

<div class="thigh"> </div>
<div class="leg"> </div>
<div class="ankle"> </div>

I want the thigh, leg and ankle should be connected as joints and it should rotate accordingly. This image is my output