I am looking for a jQuery plugin that can rotate an element by a specific number of degrees. Also, when prompted, it will return the angle of the current rotation (the JQueryRotate plugin cannot do this).

  • one
    And what's the CSS3 solution for you? - Vadim Ovchinnikov
  • what do you mean? - ivan0biwan
  • There is such a function in CSS3 rotate. Well, let's do this: if the solution will be just on CSS (without JavaScript), will it work or not? - Vadim Ovchinnikov
  • The jQueryRotate plugin uses transform: rotate (). If you do not use it, then it will be difficult to get the angle of the current turn - ivan0biwan
  • Well, if you can apply CSS transform: rotate , why do you need jQuery plugins? - Vadim Ovchinnikov

2 answers 2

For this task, you can do without jQuery-plugin.

Set values ​​via jQuery: $("selector").css("transform", "rotate(45deg)") .

Then extract var transform = $("selector").css("transform") . Then, to the transform variable, we retrieve the value from the matrix.

Example:

 function setAngle(degrees) { $("img").css("transform", "rotate(" + degrees + "deg)"); } function getAngle() { var transform = $("img").css("transform"); var matches = transform.match(/matrix\((.*?)\)/i); if (matches == null) return null; var values = matches[1].split(', '); var a = values[0]; var b = values[1]; return Math.round(Math.atan2(b, a) * (180 / Math.PI)); } $(".rotation-getter-button").click(function() { alert(getAngle()); }); $(".rotation-setter-button").click(function() { setAngle($(this).text().trim()); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="https://i.stack.imgur.com/cB7Si.jpg" /> <button class="rotation-setter-button"> -30 </button> <button class="rotation-setter-button"> 0 </button> <button class="rotation-setter-button"> 45 </button> <button class="rotation-setter-button"> 90 </button> <button class="rotation-getter-button"> Get current angle </button>

  • See how placehold.it looks like. It seems you can live, turns are clearly shown. - Nick Volynkin ♦
  • Yes, it looks good, thank you very much - ivan0biwan

Still, the JQueryRotate plugin can do this.

Site plugin http://jqueryrotate.com/

Turn:

 $("#img").rotate(45);

Current angle

 $("#img").getRotateAngle();
  • Can you add code examples to make it clear what this plugin is good for? - Vadim Ovchinnikov
  • Although the link can find the answer to the question, it is better to point out the most important thing here, and give the link as a source. If the page to which the link leads will be changed, the response link may become invalid. - From the queue of checks - Vadim Ovchinnikov
  • added code examples - ivan0biwan