通過CSS旋轉和放置圖像無法使用270度

Question

我希望每次單擊按鈕時都能將圖像旋轉90度。 我也希望將其“固定”到包含DIV的左上角。

我的代碼似乎適用於除270以外的所有代碼，在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/

Answer 1

看起來您實際上想要的是：

.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>