通过 CSS 旋转和放置图像不适用于 270 度

Question

我希望每次单击按钮时都能将图像旋转 90 度。我还希望它 "pinned" 到包含 DIV.

的左上角

我的代码似乎适用于除 270 以外的所有代码，它旋转正确但定位不正确。

我可以 "fix" 通过调整翻译来逐个图像定位位置，但我更喜欢通用方式。我承认我不太了解 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。已更新 fiddle：

$("#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>

通过 CSS 旋转和放置图像不适用于 270 度

Rotating and placing an image via CSS not working for 270 degrees

html

css

css-transforms