Вычислить угол поворота объекта

@Pepeka · Регистрация: 15.01.2014

Студворк — интернет-сервис помощи студентам

Всем здравия и благополучия!

Вращаю линию - DIV шириной 1px и высотой 500px. Вращение по центру данного DIV-a, с помощью CSS - "rotate".

Необходимо посредством Jquery получить угол поворота данного DIV. Как это сделать, кто подскажет? Курение поиска не помогло - мало инфы, а что нашел максимум что выдает - начальный угол поворота в 0 градусов, и при вращении не меняет значение...

Добавлено через 2 часа 29 минут
UPD.

Поворот данного DIV-a в CSS задан динамический, плавный, например (transition: all 10s linear).

Итого, за весь период вращения линии нужно непрерывно получать значения текущее значение её поворота в градусах.

Чтобы при определенных величинах, ну там 10deg, 25.5deg и т.п. - в том же JQ скрипте делать кое какие короткие анимационные пакости с другими DIV-ами на странице

@Уф · 14.07.2017, 11:49

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

@Pepeka · 14.07.2017, 12:29 **[ТС]**

Сообщение от Уф

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

Что ж... действительно, вариант. Спасибо, подумаю!

@Уф · 14.07.2017, 14:15

https://jsfiddle.net/tgzjfug2/ типа такого. проценты подбери и всё

HTML5
1
2
3
4
5
6
7
<img class="wheel" src="http://poistine.org/sites/default/files/photo.png" height="150px">
<div id="deg10">
10
</div>
<div id="deg25">
25
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.wheel {
    animation-name: spin;
    animation-duration: 3600ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
 
@keyframes spin {
    from { transform:rotate(0deg);  }
    to { transform:rotate(360deg); }
}
 
#deg10 {
    animation-name: drop1;
    animation-duration: 3600ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
 
#deg25 {
    animation-name: drop2;
    animation-duration: 3600ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
 
@keyframes drop1 {
    0%,10% { transform:translate(0,0);   }
    20% { transform:translate(50px,0); }
    30%,100% { transform:translate(0,0);  }
}
@keyframes drop2 {
    0%,25% { transform:translate(0,0);   }
    35% { transform:translate(50px,0); }
    45%,100% { transform:translate(0,0);  }
}

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@Pepeka 171 / 170 / 36 Регистрация: 15.01.2014 Сообщений: 1,010

	Вычислить угол поворота объекта 13.07.2017, 11:00. Показов 2820. Ответов 3 Метки поворот, Получить, угол (Все метки) Всем здравия и благополучия! Вращаю линию - DIV шириной 1px и высотой 500px. Вращение по центру данного DIV-a, с помощью CSS - "rotate". Необходимо посредством Jquery получить угол поворота данного DIV. Как это сделать, кто подскажет? Курение поиска не помогло - мало инфы, а что нашел максимум что выдает - начальный угол поворота в 0 градусов, и при вращении не меняет значение... Добавлено через 2 часа 29 минут UPD. Поворот данного DIV-a в CSS задан динамический, плавный, например (transition: all 10s linear). Итого, за весь период вращения линии нужно непрерывно получать значения текущее значение её поворота в градусах. Чтобы при определенных величинах, ну там 10deg, 25.5deg и т.п. - в том же JQ скрипте делать кое какие короткие анимационные пакости с другими DIV-ами на странице 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	14.07.2017, 11:49
	тут наверное разумнее разбить анимацию на части keyframes и прописать им время, а у других элементов сделать тоже анимацию отдельную только в эти моменты времени 1

Вычислить угол поворота объекта

Решение