Как мне соединить обычные (горизонтальные) и повернутые линии в одной точке в HTML и CSS?

Question

Я новичок. Чтобы сделать бедро, ногу и лодыжку как структуру в виде толстых линий. Я должен вращать его, используя анимацию, но они вращаются таким образом, что они находятся в разных точках. Но я хочу, чтобы суставы между линиями были такими же, как коленный сустав, тазобедренный сустав.

Я включил код, который я пробовал.

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

Я хочу, чтобы бедро, нога и лодыжка были соединены как суставы, и они должны вращаться соответственно. Это изображение - мой вывод

Answer 1

Вам необходимо установить CSS transform-origin (именно здесь происходит преобразование).В большинстве браузеров по умолчанию используется центр / центр, поэтому вещи не остаются «подключенными».

Например,

.element {
 transform: rotate(45deg);
 transform-origin: top left;
}

Однако, если вы хотите настоящие кости IK, вам, вероятно, потребуется создать что-то более надежное, скажем, SVG со встроенной анимацией.Возможно, я бы использовал инструмент анимации, который экспортирует для Интернета.