JQuery плагин для поворота элемента

475

07 января 2017, 15:06

Ищу JQuery плагин, который может повернуть элемент на конкретное количество градусов. Также при запросе будет возвращать угол текущего поворота (плагин JQueryRotate так не может).

Answer 1

Для данной задачи можно обойтись и без jQuery-плагина.

Устанавливаем значения через jQuery: $("selector").css("transform", "rotate(45deg)").

Затем извлекаете var transform = $("selector").css("transform"). Затем к переменной transform извлекаем значение из матрицы.

Пример:

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>

Answer 2

Все-таки плагин JQueryRotate так может.

Сайт плагина http://jqueryrotate.com/

Поворот: