Geek Answers Handbook

JQuery on drag axis

I have a bug with draggable in jQuery. When I rotate the image, it changes the axis. Here is the FIDDLE . My javascript code to rotate:

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

How can i fix this? Thanks for every reply.

+4
source share
1 answer

I think the property transform-originwill help solve the problem.

 #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;
}

By default, the start of the conversion is “50% 50%”, which is exactly at the center of any given element. Changing the origin to "upper left" (as in the demo above) forces the element to use the upper left corner of the element as a pivot point.

, top, left, right, bottom center.

0

More articles:


All Articles