j在可拖动的更改轴上查询

jQuery on draggable change axis

本文关键字：查询 拖动      更新时间：2023-09-26

我在jQuery中有一个可拖动的错误。当我旋转图像时，它会改变轴。这是小提琴。 我的 JavaScript 旋转代码：

var angle = 0;
document.getElementById('button').onclick = function() {
    angle = (angle+90)%360;
    document.getElementById('image').className = "rotate" + angle;
    }

我该如何解决它？谢谢你的每一个回答。

我认为transform-origin属性将有助于解决问题

 #image{
  position:absolute;
  background-image: url(https://pixabay.com/static/uploads/photo/2013/10/18/09/15/flower-197343_960_720.jpg);
  background-size:cover;
  width: 350px;
  height: 220px;
  overflow: hidden;
}
    #crop{
        width: 100px;
        height: 100px;
        position:absolute;
        cursor: move;
        box-shadow: 0px 0px 0px 500px rgba(0, 0, 0, 0.7);
        background: transparent;
        z-index: 1;
    }
#image.rotate90 {
    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
}
#image.rotate180 {
    transform: rotate(180deg) translate(-100%,-100%);
    -webkit-transform: rotate(180deg) translate(-100%,-100%);
    -ms-transform: rotate(180deg) translateX(-100%,-100%);
    transform-origin: top left;
}
#image.rotate270 {
    transform: rotate(270deg) translateX(-100%);
    -webkit-transform: rotate(270deg) translateX(-100%);
    -ms-transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
}

默认情况下，变换的原点是"50% 50%"，它正好位于任何给定元素的中心。将原点更改为"左上角"（如上面的演示所示）会导致元素使用元素的左上角作为旋转点。

值可以是长度、百分比或关键字 top 、 left 、 right 、 bottom 和 center 。

相关文章：