Jquery вращать дивы

Question

У меня есть вопрос, потому что я не могу найти один плагин в JQuery для этого

Мне нужно, например, 10 контейнеров div, эти div-ы показывают с плавающей точкой, оставленной с его идентификатором и т. Д., Мне нужен плагин, или что-то может показать число, которое я хочу из этих 10, 20 и т. Д. Divs, и показать в группах по 4, 3 или число, которое я хочу и повернуть или переместить

Например, покажите первые 4 деления и после 8, ..... и т. Д. И выберите эффект для этого перехода

Мне нужно это, я вижу много плагинов, но не работает, чтобы показать это, также, если этот плагин или сценарий и т. Д. Могут позволить ручному (ручное или автоматическое вращение - без ползунка поиска) движение со стрелками и т. Д. Идеально, но самое важное показывает только количество div я хочу и повернуть их и показать другие div и когда идти до конца, показать в другой раз первый div и т. д.

Спасибо, извините, если не все прекрасно понимаю

С уважением!!!

Answer 1

QTransform позволяет вращать, наклонять, масштабировать и переводить, и он работает в разных браузерах.

Скачайте и включите QTransform.js на ваш HTML.

<script src="js/qTransform.js"></script>

Укажите фиксированную высоту ширины для ваших div и добавьте следующий скрипт:

$('#box4').delay(300).animate({rotate: '20deg'}, 500);
$('#box5').delay(700).animate({rotate: '50deg'}, 500);
$('#box6').delay(1200).animate({rotate: '80deg'}, 500);

где (box4, box5 и box6 - это мои идентификаторы div).

delay(300), delay(700) & delay(1200) запускает анимацию через 300, 500 и 1200 миллисекунд. И 500 в конце - это продолжительность анимации.

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

Взять угол в переменную. например

var degAngle = 60;

и добавить его в скрипт, как

$('#box4').delay(300).animate({rotate: degAngle+'deg'}, 500);

Вы также можете предоставить несколько эффектов, таких как масштаб вместе с вращением. Например,

$('#box4').delay(300).animate({scale: '1.5', rotate: '20deg'}, 500);

Почему QTransform?

До даты jQuery не поддерживает CSS3-анимацию. Этот плагин может помочь вам достичь вашей цели.

Надеюсь, что это работает для вас.