— Pixels Commander

[ In English, На русском ]

Вращение HTML элементов мышью

Вращение — обыкновенная магия. Это эффект, который может превратить скучную веб страницу в куда более интерактивное пространство. Не смотря на это, вращение было обделено вниманием с момента его добавления в CSS. Propeller.js — JavaScript библиотека позволяющая вращать HTML элементы мышью или тач жестами.

Rotate elements by mouse or touch


Как jQuery плагин:


или библиотека без зависимостей

new Propeller(nodeOrSelector, options);


  • inertia — одна из самых ценных опций. Это число от 0 до 1. 0 значит объект перестает вращаться после того как кнопка мыли отпущена. 1 значит вечное вращение. На странице библиотеки использована inertia равная to 0.99.
  • speed — позволяет задать начальную скорость вращения. Так же может быть использовано в рантайме, как свойство объекта.
  • minimalSpeed — задает минимальную скорость вращения. Работает только при inertia между 0 и 1.
  • step позволяет задать шаг в градусах, включая тем самым режим пошагового вращения.
  • stepTransitionTime включает CSS transition для пошагового вращения. Это делает переключение между шагами плавным и позволяет использовать easing.
  • stepTransitionEasing CSS easing функция для пошагового режима с включенными transition. Тут больше про easing функции
  • onRotate коллбек выполняемый при вращении. Получить текущий угол внутри коллбека просто — this.angle.
  • onDragStart коллбек выполняемый при начале перетаскивания.
  • onDragStop коллбек выполняемый при окончании перетаскивания.
  • onStop коллбек выполняемый при окончании вращения. Работает только при inertia между 0 и 1.

Публичные свойства

  • angle текущий угол пропеллера.
  • speed текущая скорость вращения. Градусы за один кадр.


Propeller использует requestAnimationFrame и рендеринг через GPU для оптимизации.
Propeller.js на GitHub

Буду рад вашим предложениям или вопросам.

  • Sonu Sindhu

    Fine nice unbelievable super 🙂 (y)

  • http://www.techrecite.com/rotate-image-photo-or-object-around-its-axis-using-javascript-animation/ Rotate image photo picture object around its axis JavaScript animationProgramming tutorials and demos

    […] animation of an image or object which can rotate around its axis. More demos can be found on its developer’s page. Download animation javascripttweet!function(d,s,id){var […]

  • http://jquer.in/css3-jquery-plugins/propeller/ Propeller | javascript plugin to rotate html elements

    […] Home Example rotate html elements […]

  • Greg

    Very very nice!!!Excellent Job! Only one question: how can i add an event lesteren so as to get angle when rotation stops?

  • Аноним

    Hi. Thanks! Check recent version on GitHub. There is onStop callback added it executes when rotation stops.

  • Maheedhar

    very nice…awesome. But there is a conflict to use jquery draggable, resizable options. It could be even better, if u can provide hot spots for clicking & rotating object.

  • LB Deyo

    Great job on this! Question: Is there a way to set rotation? Or at least set a minimum and maximum rotation?

  • Аноним

    There is «minimalSpeed» option to set minimum speed and «speed» option to set initial speed of rotation. Maximum rotation speed is limited only by how fast is your user =)

  • LB Deyo

    I’m trying to make sure the user doesn’t rotate the object more than once, front or back. So I want to keep the object’s rotation between -360 and 360. Is that possible?

  • Аноним

    Could you drop me a message to skype lp_funky in order to clarify your needs? Sure, we can figure out correct solution.

  • alexis

    Woaw thanks for sharing this. Why does OnDragStop fires several times when I launch the propeller ?

  • Аноним

    Seems it is a bug. I rised an issue at GitHub https://github.com/PixelsCommander/Propeller/issues/4 will take a look soon.

  • Аноним

    I am not able to reproduce this. Could you drop me a link or fiddle with your project?

  • Aaron Lee

    This is awesome! But a question though, what’s the browser support like

  • Аноним

    It is IE9+, FF, Chrome, Safari, Android 2.2+, Safari Mobile. So there is support for all modern browsers.

  • Aaron Lee

    awesome. whats the fallback like in IE8 (*shivers*) and below?

  • Аноним

    I tried to add IE8 fallback using filters but it is very slow and image quality is also degrading. Microsoft dropped XP support few weeks ago so IE8 seems to be a history.

  • SL Udwig

    Is there an option like ‘handle’ planned?
    It will be nice to have an external HTML-element to controll rotation an not a whole element; because this confilcts with Drag’nDrop and other.

  • Аноним
  • SL Udwig

    Just another feature request: an option to locate center? Can be usefull, but center of rotating elemnt ist okay.

  • Daniel Haro

    Hi, would be great if the rotation of an object could be stopped or activated by an external object, or with another events like click or over. Thanks in advance !

  • Аноним

    Is it ok for you to have .stop() method on propeller object?

  • Daniel Haro

    Yep, a stop() method would be helpful. However, To have both play () and stop () methods would be glorious. I’m having conflicts trying to combine propeller with other functions to make an element rotate, this one in paritcular:


    I really appreciate your attention, and I think you’re doing a great job with propeler.js, Greetings!

  • Аноним

    Try out new version from GitHub

  • Simon Lopez

    hello I want to know is if propeller.js has some method to destroy the movement, also the jquery ui draggable function has the destroy

  • Аноним

    Hi and sorry for being late.

    There is nothing like this at the moment. Do you need this feature?

  • ivicajimi

    great plugin, but I believe that destroy method is necessary. I would be very thankful if you can help me achieve this.

  • Аноним

    Hi, try out bind / unbind methods from last version

  • Аноним

    Try bind / unbind in most recent version

  • ME

    HI, first of all… great plugin!
    I was wondering if it is possible to trigger the function for two elements at the same time when you drag only one element.
    So what I would like to have is to drag one element and animate two elements simultaneous.

    Does your plugin support this?

  • Аноним

    Hi, thanks! Glad you like it.

    To rotate two propellers in sync you may set angle property of propeller2 inside of onRotate callback of propeller1.

    onRotate: function(){
    propeller2.angle = this.angle;

  • ME

    thank you so much for your quick response.
    I have tried your solution but it doesn’t seem to work.
    The one I’m dragging is is working as it should.

  • Аноним

    Actually it should works and it works. Check it out here http://pixelscommander.com/polygon/twopropellers/ and try to get difference between this page and one you made.

  • ME

    Hi there, it’s ME again.
    A while ago I started working with you plugin which is great. Now, 2 months later I have been asked to make some additional features. What I like to have is to set the angle back to 0 after spinning the 360 degrees.

    Could you tell how to do this?


  • Аноним

    Have you tried to set angle to 0?

    var propeller = new Propeller(…)
    propeller.angle = 0;

  • http://www.cellsignal.com/ ME

    Thanks for the suggestion.
    I have already tried setting it to 0 when the angle matches a certain value.
    This works fine except for one downside. The propellor visually spins back to 0.

  • Аноним

    But this is exactly what should happen. If you need some kind of virtual angle with displacement — create your own variable and update it inside of onRotate in any way you would like to.

  • http://www.cellsignal.com/ ME

    Hi, sorry for the late response.
    Thanks for your feedback. I guess I had the wrong expectations but your explanations makes sense.

    I have another question though… Have you found a solution for crossbrowser support yet? It’s to bad the propeller doesn’t work in firefox.

  • Аноним

    Propeller.js is compatible with all modern browsers including Firefox, Internet Explorer 9, iOS and Android. Check a console for errors. Apparently it is a problem in your code.

  • http://www.cellsignal.com/ ME

    Hi, thanks for your quick reply. I’m afraid I have to disagree with you because I tested your page in firefox and that doesn’t work either. I am using version 10.0.3

  • Аноним

    My current version is 32.0.3 seems that your one is few years behind it. Just update FF.

  • http://www.cellsignal.com/ ME

    OK so I just found out that IT needs to perform a serious update. We are using Firefox ESR. I just starting working in my current company so I didn’t look at my FF version before. I have put in a request for an update.
    Sorry about this. I found it hard to believe that someone would develop such a plugin that would not be crossbrowser compatible. I look forward to my updated browser version 🙂

    Thanks again!

  • David

    How about a disable and enable to stop and start rotation?

  • Аноним

    Recent version have bind / unbind methods. Check them out.

  • http://www.NickSaulino.com Nick Saulino

    Thank you so much for this. I was just wondering if there was some way of adding a count to get a running number of spins.

  • Аноним

    Hi, it is very easy to implement. Check angle onRotate and if it is moved between 360 and 0 — add one, if it moved from 0 to 360 — divide one

  • Keith

    This is awesome, thank you so much! Is there any way that the speed can be updated dynamically?

  • Аноним

    Have you tried to change .speed property?

  • hahamy

    element has a inital speed, When drag, rotate element, drag end, element remain rotate with the inital speed.
    jQuery(«.earth-container»).propeller({inertia: 0.8, speed: 2, onDragStop : function(){
    this.speed = 1;
    but, It doesn’t work as I wished

  • hahamy

    It works now, code below
    inertia: 1,
    var rp = this;
    rp.inertia = 1;
    rp.speed = 0.1;
    }, 2000);

  • Stanislav Dzhus

    hi, I created round menu, based on your library.
    every button has a «href» attribute. when I click a menu button, I go to another page. but when I go back to page with my round menu and click any menu button, nothing happens. seems like click events are blocked after first click on button
    how do you think, the problem is caused by Propeller?
    thank you in advance!

  • Аноним

    Please, share the code, have to look at what is happening there.

  • Stanislav Dzhus

    I found that the problem isn’t caused by Propeller, sorry

  • Аноним

    Plugin is just cool but when i apply propellor to a div and unbind it and then add draggable to the same div then the draggabble doesnt work

  • Аноним

    Could you create issue on GitHub?

  • Аноним
  • tech 407

    Great plugin, I have a requirement to set maximum rotation angle should be 125deg only. after this angle I don’t want to rotate the element. Is there any Option to set maximum angle.

  • Аноним

    I assume you can set this,angle onRotate based on if this.speed is — or +

  • Faran Tariq

    I want to rotate three objects not in sync but on different events. Like when I click on one object It starts rotating. When I click on second object, first object became stationary if moving and second object will start to move. I can only manage to rotate one object out of three. Can you please help me?

  • admin

    Sounds as a generic JS task. You should just enable / disable a propeller when need any of these

  • Аноним

    First of all thanks for this awesome work.
    I’ve got a question, there is a way to spin back (with inertia / animation) onDragStop ?
    I didn’t find any way to do that…
    thx in advance

  • admin

    Not sure what scenario is. Most likely you ll need a modification.

  • Maycon Silva

    How I can change the center of rotation?

  • Maycon Silva

    How can I perform a function when the spin is in certain degree?

  • admin

    Use onRotate callback and read angle from arguments

  • Ruben

    Great work!
    one question, can i make the rotation in counter-clock wise direction?

  • admin

    Yes, why not?

  • Eugene Zoleta

    Hi, I created a simple html editor and I am using it to rotate texts, images and it works. There is no problem when viewing the generated html, i still see the rotation of the text and images, however, when I load it back to the editor, all the rotations are gone (seems like back to zero). It seems that the rotation is always being reset every time i call this : $(‘.rotate’).propeller({inertia: 0, speed: 0});

    I hope there is a way to preserve (do not change) the rotation of an html element every time propeller is being initialized.

  • http://www.Elk101.com Corey Jacobsen
  • Аноним

    I think you can save angle to some attribute and then restore it from there. https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

    You ll be able to set angle when loading with $(node).propeller({angle: $(node).data(‘angle’)})

  • Kelvin Mgbemele

    can i make the parent div along alongside when rotating the main div?