Блог

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

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

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

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

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

Например

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

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