Как вращать объект по часовой стрелке?

Как повернуть объект по часовой стрелке (без холста, css3 и т.д.)?

См. мой пример кода

Просто помогите исправить мою формулу.

2 ответа

Вы не можете сделать это без CSS, но ваш примерный код использует CSS для перевода: вы изменяете свойства CSS с помощью JavaScript для изменения свойства стиля div.

Попробуйте что-то вроде:

div.style['-webkit-transform'] = 'rotate(' + angle + 'deg)';

Чтобы установить угол, предположим, что вы работаете с браузером Webkit.


Есть два способа, которыми вы можете повернуть свой объект, у обоих есть свои обратные спины.

1) Вы можете использовать php для отправки повернутой версии вашего изображения. Это довольно легко сделать с использованием библиотеки GD.

Положительным в этом случае является то, что если вы используете такое имя, как rotate.php? image = my_image_name & angle = 30, тогда браузер будет кэшировать изображение для вас.

Однако это будет задержка с этим, и поэтому это не очень хорошее решение для игр.

2) Вы создаете повороты и прикрепляете их все к одному большому листу спрайта. Затем вы можете просто переключаться между спрайтом.

Однако это означает, что у вас будет большой файл изображения и обычно не будет идеального вращения. Вы можете уменьшить это путем вращения в фиксированных количествах, таких как 5 градусов, но даже при этом у вас будет 72 разных версии вашего изображения.

Оба эти метода работают только с файлами изображений, а не с div. Вы можете использовать изображения в качестве фона divs ofcourse.

licensed under cc by-sa 3.0 with attribution.