CSS3变换使用鼠标位置旋转 [英] CSS3 transform rotate using mouse position

问题描述

我想使用CSS3transform：rotate旋转div元素。
我想获得鼠标位置的度数，例如跟踪鼠标。

I want to rotate a div element using CSS3 "transform:rotate". I want to get the degree from mouse position, like tracking the mouse.

如何实现？

谢谢！

推荐答案

检查

http://jsfiddle.net/arunberti/fSgPf/1/

$(document).ready(function() {
  // the same as yours.
  function rotateOnMouse(e, pw) {
      var offset = pw.offset();
      var center_x = (offset.left) + ($(pw).width() / 2);
      var center_y = (offset.top) + ($(pw).height() / 2);
      var mouse_x = e.pageX;
      var mouse_y = e.pageY;
      var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
      var degree = (radians * (180 / Math.PI) * -1) + 100;
      //            window.console.log("de="+degree+","+radians);
      $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)');
      $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)');
      $(pw).css('-o-transform', 'rotate(' + degree + 'deg)');
      $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)');
  }

  $('.drop div img').mousedown(function(e) {
    e.preventDefault(); // prevents the dragging of the image.
    $(document).bind('mousemove.rotateImg', function(e2) {
      rotateOnMouse(e2, $('.drop div img'));
    });
  });

  $(document).mouseup(function(e) {
    $(document).unbind('mousemove.rotateImg');
  });
});

这篇关于CSS3变换使用鼠标位置旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！