通过CSS旋转和放置图像不能工作270度

Question

我希望每次单击按钮时能够将图像旋转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/

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>