CSS3变换使用鼠标位置旋转
CSS3 transform rotate using mouse position
我想使用CSS3"transform:rotate"旋转div元素。我想从鼠标的位置获得度数,就像跟踪鼠标一样。
我怎样才能做到这一点?
谢谢!
检查
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');
});
});
相关文章:
- 单击链接时如何将引导程序转盘旋转到特定位置
- 有没有办法得到引导3旋转木马的索引位置
- JQuery-随机元素在容器内的绝对位置和旋转
- 旋转分区的绝对位置
- googleMap标记旋转位置发生变化
- 三.js使用矩阵旋转时对象位置问题
- HTML5 Canvas - 如何在旋转后获取对象的绝对位置
- 三.js将盒子旋转到鼠标位置不起作用
- 在 SVG 动画中围绕舞台原点以外的其他位置旋转路径
- 使用轨迹球控制时重置摄像机位置/旋转
- 如何在ios应用程序中更改位置iPhone时制作旋转照片
- 如何计算旋转图像的正确位置偏移
- 如何在旋转时将图像保持在原始位置
- CSS3变换使用鼠标位置旋转
- CSS3变换使用鼠标位置旋转-第二阶段
- HTML5画布中旋转矩形内的鼠标位置
- Three.js将球体旋转到任意位置
- 计算旋转后长方体阴影的位置
- js -子对象在它的位置旋转
- 根据其他图像的位置旋转图像90度