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>

通过CSS旋转和放置图像无法使用270度

1 个答案: