Как правильно реализовать событие onmousemove с style.transform?

Question

[Артур Левенсон]

Есть текущая задача заставить серый круг следовать за курсом мыши внутри красного квадрата.

Попробовал реализовать с помощью события onmousemove и style.transform. событие срабатывает, а вот style.transform вместе с функцией нет. Пожалуйста, подскажите, как правильно реализовать задачу

Мой код: https://codepen.io/kiskiskit/pen/dyWLogP

Comments

[0xD34F]

Работает. Попытайтесь осознать, что "не работает" и "внешних изменений нет" - это не одно и то же.

[Артур Левенсон]

0xD34F, спасибо. поправил

[0xD34F]

Правьте ещё. "Некорректно" и "не так, как я задумал" - это тоже ни разу не синонимы.

[Артур Левенсон]

0xD34F, теперь норм?

[Сергей Сергей]

Всё работает, круг крутится.

[0xD34F]

Конечно же не "норм". Очевидно, вы не до конца понимаете разницу между понятиями "событие" и "обработчик события".

[Артур Левенсон]

Сергей Сергей, почему это не отображается? в чём моя ошибка?

[Сергей Сергей]

Ошибка искать отличия в фигуре круга, повернутого относительно своего же центра. Предлагаю что-нибудь написать внутри круга.

Answer 1

[Роман]

Сумел восстановить код, вам немного повезло.
Вот пример, а как сделать из него глаза - это уже сами

https://codepen.io/lastuniverse/pen/VwbNeVq


ЗЫ: Пример слегка переусложнен, но зато он включает в себя базовые обязательные моменты для анимации

Comments

[Артур Левенсон]

Огромное спасибо!

[Роман]

Артур Левенсон, рано благодарите. Для начала разберитесь с самим примером, а потом будет видно, то ли это что вам надо или нет)))

[Артур Левенсон]

Роман, да, я уже разобрался, спасибо. это именно, то что мне нужно. сейчас буду пробовать делать глаз с помощью svg