Question

我在jQuery中有一个draggable错误。当我旋转图像时，它会改变轴。这是FIDDLE。我的旋转javascript代码：

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

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

Answer 1

我认为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;
}

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

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

可拖动更改轴上的jQuery

1 个答案: