Как заставить x и y переворачивать изображение как пользовательский интерфейс с изменяемыми размерами Jquery с ручками?

Мне нужно перевернуть изображение с осями x и y, я уже использовал Jquery UI для изменения размера и поворота. Но не могу сделать перевернуть изображение. Я просмотрел множество плагинов для создания переворачиваемого изображения, но они автоматически переворачиваются одним щелчком мыши или любым другим событием, но мне нужно работать с заданными пользователем позициями с помощью ручек.

 $("img").css({"width":"100px","height":"100px"}).resizable({handles:'ne,se,nw,sw'}).parent().draggable();

JQuery UI изменить размер и перетащить образец в ссылку Jsfiddle..!

Источник

1 ответ

Не зная больше, вы можете увидеть пример того, как перевернуть изображение:

https://jsfiddle.net/Twisty/bncxeu1c/3/

HTML

<body>
  <a id="x" href="#">Flip X</a> <a id="y" href="#">Flip Y</a>
  <div>
    <img class="front up" src="http://placehold.it/80x80/c9112d/fff&text=1" width="100%" height="100%" />
  </div>
</body>

CSS

.ui-resizable-se {
  background: yellow;
  border: 2px solid red;
  width: 12px;
  height: 12px;
  margin-bottom: 0;
  margin-right: 0;
}

.ui-resizable {
  border: 1px dashed black;
}

// Flip on Y
.front {
  transform: none;
}

.back {
  transform: rotateY(180deg);
}

//Flip on X
.up {
  transform: none;
}

.down {
  transform: rotateX(180deg);
}

JQuery

$(document).ready(function() {
  $("img").css({
    "width": "100px",
    "height": "100px"
  }).resizable({
    handles: 'ne,se,nw,sw'
  }).parent().draggable();

  $("#y").click(function() {
    if ($("img").hasClass("front")) {
      $("img").removeClass("front").addClass("back");
    } else {
      $("img").removeClass("back").addClass("front");
    }
  });

  $("#x").click(function() {
    if ($("img").hasClass("up")) {
      $("img").removeClass("up").addClass("down");
    } else {
      $("img").removeClass("down").addClass("up");
    }
  });
});
Источник
Другие вопросы по тегам