Поворот и размещение изображения через CSS не работает на 270 градусов - PullRequest
Новая
       6

Поворот и размещение изображения через CSS не работает на 270 градусов

0 голосов
/ 10 сентября 2018

Я хотел бы иметь возможность поворачивать изображение на 90 градусов каждый раз, когда я нажимаю кнопку.Я также хочу, чтобы он был "прикреплен" к верхнему левому углу содержащего DIV.

Мой код работает для всех, кроме 270, где он вращается правильно, но не позиционируется правильно.

Я могу «исправить» положение на основе изображения, настраивая перевод, но я бы предпочел общий способ.Я признаю, что не знаю много о 2D преобразованиях, поэтому, если кто-нибудь сможет объяснить, я был бы благодарен!

Ниже приведена простая абстракция моей проблемы:

Код:

HTML : 

<a href="#" id="myrotate">[ rotate ]</a>
<div style="border: 1px solid red;">
  <img id="myimage" src="http://images.domain.com.au/img/Agencys/16067/logo_16067.GIF" style="border: 3px solid silver;" />
</div>

CSS: 

.rot0 {
  transform-origin: left top;
}

.rot90 {
  transform: translateY(-100%) rotate(90deg);
  transform-origin: left bottom;
}

.rot180 {
  transform:rotate(180deg);  
}

.rot270 {
  transform: rotate(270deg) translateY(-148%);
    transform-origin: right top;
}

JS: 

$("#myrotate").click(
  function(e) {
    var img = $("#myimage");
    if (img.hasClass("rot0"))
      img.removeClass("rot0").addClass("rot90");
    else if (img.hasClass("rot90"))
      img.removeClass("rot90").addClass("rot180");
    else if (img.hasClass("rot180"))
      img.removeClass("rot180").addClass("rot270");
    else if (img.hasClass("rot270"))
      img.removeClass("rot270").addClass("rot0");
    else
      img.addClass("rot90");
  }
);

MVCE: http://jsfiddle.net/d3g0x72t/

1 Ответ

0 голосов
/ 10 сентября 2018

Похоже, что вы действительно хотите: 

.rot270 {
  transform: rotate(270deg) translateX(-100%);
  transform-origin: left top;
}

Нам нужно перевести X, а не Y здесь.Обновленная скрипка: 

$("#myrotate").click(
  function(e) {
    var img = $("#myimage");
    if (img.hasClass("rot0"))
      img.removeClass("rot0").addClass("rot90");
    else if (img.hasClass("rot90"))
      img.removeClass("rot90").addClass("rot180");
    else if (img.hasClass("rot180"))
      img.removeClass("rot180").addClass("rot270");
    else if (img.hasClass("rot270"))
      img.removeClass("rot270").addClass("rot0");
    else
      img.addClass("rot90");
  }
);
//http://images.domain.com.au/img/Agencys/16067/logo_16067.GIF
//http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg
.rot0 {
  transform-origin: left top;
}

.rot90 {
  transform: translateY(-100%) rotate(90deg);
  transform-origin: left bottom;
}

.rot180 {
  transform:rotate(180deg);  
}

.rot270 {
  transform: rotate(270deg) translateX(-100%);
  transform-origin: left top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a href="#" id="myrotate">[ rotate ]</a>
<div style="border: 1px solid red;">
  <img id="myimage" src="http://images.domain.com.au/img/Agencys/16067/logo_16067.GIF" style="border: 3px solid silver;" />
</div>
...