如何解决更改左右值后css旋转不起作用
我有一格。我正在尝试对div本身的mousedown / mousemove事件应用rotate CSS。
我第一次旋转时它可以正常工作。
但是,如果更改了左值和上值,则无法沿逆时针方向旋转。我该如何解决?
var img = $('.pointer');
var offset = img.offset();
var mouseDown = false;
img.mousedown(function (e) {
mouseDown=true;
});
$(document).mousemove(mouse);
function mouse(evt) {
if(mouseDown ==true){
var center_x = (offset.left) /*+ (img.width() / 2)*/;
var center_y = (offset.top) /*+ (img.height() / 2)*/;
var mouse_x = evt.pageX;
var mouse_y = evt.pageY;
var radians = Math.atan2(mouse_x - center_x,mouse_y - center_y);
var degree = (radians * (180 / Math.PI) * -1) + 90;
img.css('-moz-transform','rotate(' + degree + 'deg)');
img.css('-webkit-transform','rotate(' + degree + 'deg)');
img.css('-o-transform','rotate(' + degree + 'deg)');
img.css('-ms-transform','rotate(' + degree + 'deg)');
img.css('transition','all 0.1s');
}
}
$(document).mouseup(function (e) {
mouseDown = false;
// offset = img.offset();
})
$('.changeTopLeft').click(function() {
$('.pointer').css({
left: '200px',top: '300px'
});
});
.pointer {
height:5px;
position:absolute;
top:150px;
width:200px;
border:1px solid red;
left:150px;
transform-origin: left top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pointer"></div>
<button class="changeTopLeft">change Top Left</button>
这里是fiddle。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。