使用JavaScript旋转图像

Question

我需要使用JavaScript以90度为间隔旋转图像。我尝试了一些库，例如jQuery rotate和Raphaël，但它们都有同样的问题——图像围绕其中心旋转。在图像的所有侧面上有许多内容，如果图像不是完全正方形，则部分内容将出现在顶部。我希望图像保持在其父级

内，该父级

具有最大宽度和最大高度设置。

像这样使用jQuery rotate (http://jsfiddle.net/s6zSn/1073/):

var angle = 0;
$('#button').on('click', function() {
    angle += 90;
    $("#image").rotate(angle);
});

导致这个结果：

而我想要的结果是：

有人知道如何实现吗？

- TheQ

---

使用CSS变换来旋转整个容器，可以围绕任何您喜欢的点进行旋转。 - Blazemonger

最好的方法是使用CSS3关键帧，我想。 - DiederikEEn

如何围绕特定点前后旋转对象 - jantimon

FYI，我已经在这里解释了为什么会发生这种情况（https://dev59.com/M2Qo5IYBdhLWcg3wI8ZV#16302202）。 - MMM

@DiederikEEn 我也很担心... - Code Whisperer

问题得体地提出（由TheQ） - Ahsan

Answer 1

您需要使用CSS的transform（必要时带有供应商前缀）和transform-origin的组合，如下所示：（也可以在jsFiddle上找到）。

var angle = 0,
  img = document.getElementById('container');
document.getElementById('button').onclick = function() {
  angle = (angle + 90) % 360;
  img.className = "rotate" + angle;
}

#container {
  width: 820px;
  height: 100px;
  overflow: hidden;
}
#container.rotate90,
#container.rotate270 {
  width: 100px;
  height: 820px
}
#image {
  transform-origin: top left;
  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;
  /* Chrome */
  -ms-transform-origin: top left;
  /* IE 9 */
}
#container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
  -ms-transform: rotate(90deg) translateY(-100%);
}
#container.rotate180 #image {
  transform: rotate(180deg) translate(-100%, -100%);
  -webkit-transform: rotate(180deg) translate(-100%, -100%);
  -ms-transform: rotate(180deg) translateX(-100%, -100%);
}
#container.rotate270 #image {
  transform: rotate(270deg) translateX(-100%);
  -webkit-transform: rotate(270deg) translateX(-100%);
  -ms-transform: rotate(270deg) translateX(-100%);
}

<button id="button">Click me!</button>
<div id="container">
  <img src="http://i.stack.imgur.com/zbLrE.png" id="image" />
</div>

- Niet the Dark Absol

---

为了支持IE8和IE7，请添加filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);。其中，rotation=1表示90度旋转，2表示180度旋转，3表示270度旋转。 - mqchen

请注意，如果您希望边框正常工作，确保将此应用于图像容器。 - Niet the Dark Absol

不行！这个转换会让 OP 遇到同样的问题。虽然应用了转换，但并不是 OP 想要的方式。 - Om Shankar

@OmShankar 我认为这仍然足够让 OP 继续下去。 - Blazemonger

这个几乎可以工作，但是看一下这个链接：http://jsfiddle.net/bhN6e/。我希望图像下面的文本保持在图像下方，即使进行旋转后也是如此。因为现在的情况是，图像会覆盖在文本之上。 - TheQ

Answer 2

var angle = 0;
$('#button').on('click', function() {
    angle += 90;
    $('#image').css('transform','rotate(' + angle + 'deg)');
});

试试这段代码。

- Harsha Venkatram

Answer 3

不再需要jQuery和大量CSS（请注意，某些浏览器需要额外的CSS）

与@Abinthaha发布的内容类似，但是使用纯JS，无需使用jQuery。

let rotateAngle = 90;

function rotate(image) {
  image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
  rotateAngle = rotateAngle + 90;
}

#rotater {
  transition: all 0.3s ease;
  border: 0.0625em solid black;
  border-radius: 3.75em;
}

<img id="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>

- Anuga

---

原先被接受的答案对于我的使用情况仍然更好，因为我需要文本在图像下正确地流动，并适应图像的大小。 http://jsfiddle.net/soqkrbut/ 是原始答案的更新版本，可以完全满足我的要求。使用这段代码无法正常工作，请参见http://jsfiddle.net/uzhoy6pm/。 - TheQ

谢谢你，我很讨厌在本来不需要jQuery的问题中被强制使用它。 - Wyatt Ward

我知道应该避免，但是给钢铁侠的图片点个赞。 - smoore4

我领先于我的时间（现在已经玩了50多个小时 :)）。 - Anuga

Answer 4

希望这能帮助您！

<input type="button" id="left"  value="left" />
<input type="button" id="right" value="right" />
<img src="https://www.google.com/images/srpr/logo3w.png" id="image">

<script>
 var angle = 0;
    $('#left').on('click', function () {  
        angle -= 90;
        $("#image").rotate(angle);
    });

    $('#right').on('click', function () {  
        angle += 90;
        $("#image").rotate(angle);
    });
</script>

Try it

- Man Sun

Answer 5

CSS可以应用，您需要正确设置transform-origin以获得所需的转换效果。

请参见以下示例： http://jsfiddle.net/OMS_/gkrsz/ 下面是主要代码：

/* assuming that the image's height is 70px */

img.rotated {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);

    transform-origin: 35px 35px;
    -webkit-transform-origin: 35px 35px;
    -moz-transform-origin: 35px 35px;
    -ms-transform-origin: 35px 35px;
}

jQuery 和 JS:

$(img)
    .css('transform-origin-x', imgWidth / 2)
    .css('transform-origin-y', imgHeight / 2);

// By calculating the height and width of the image in the load function

// $(img).css('transform-origin', (imgWidth / 2) + ' ' + (imgHeight / 2) );

逻辑:

将图像的高度除以2。 transform-x 和 transform-y 的值应该是这个值。

链接:

CSS中的 transform-origin 属性 | MDN

- Om Shankar

---

如果图像的尺寸发生变化或者不是固定的呢？那将会是一场灾难。记住，这是在进行180度和270度旋转时的一场灾难。 - Niet the Dark Absol

@Kolink。很酷。无论如何，页面上有jQuery和JS。可以动态计算并应用此CSS。我正在编辑JS的答案。感谢指出！ - Om Shankar

看起来有点过于复杂了。我更喜欢我的解决方案 :p 它完全独立于图像的大小。 - Niet the Dark Absol

@Kolink，我按照从 Mozilla DN 阅读的概念进行操作。在您的解决方案中（当然很好），您正在进行额外的转换。这是欺骗：）此外，从概念上讲，使用“transform-origin”值实现的是翻译 - 仅仅是它们将变换的原点转换而不是元素本身。 - Om Shankar

问题在于你不能有一个单一的起点来处理所有四个位置。这就是为什么我坚持使用一个起点并调整位置以正确放置它的原因。 - Niet the Dark Absol

请注意：如果您想将 transform-origin 设为图像的中心，只需使用值 50% 即可，例如：transform-origin: 50% 50%; - Robin

Answer 6

我看到了你的运行代码。你的代码需要进行一行更正。

$("#wrapper").rotate(angle); 

改为：

$("#image").rotate(angle);

并且您将获得所需的输出，希望这是您想要的。

- Prachi Jain

---

@Mikeys4u，这个库没有加载。这个可以用：http://jsfiddle.net/MQ3YF/112/ - Piyin

Answer 7

我认为这会起作用。

    document.getElementById('#image').style.transform = "rotate(90deg)";

希望这可以帮到你。我使用这个方法成功了。

- Nguyen Hai DANG

Answer 8

您可以始终使用带有rotate属性的CCS类 - http://css-tricks.com/snippets/css/text-rotation/

为了使旋转图像保持在div尺寸内，您需要调整CSS，除了添加类之外不需要使用JavaScript。

- Wojciech Bednarski

---

“CCS class with rotate property” - 是笔误还是概念错误？ （翻译：这句话的意思是询问对方提到的“CCS类别是否具有旋转属性”的问题中，是字母拼写错误还是涉及到概念上的错误。） - Om Shankar

Answer 9

基于Anuga的答案，我已将其扩展到多个图像。

将图像的旋转角度作为图像属性进行跟踪。

function rotate(image) {
  let rotateAngle = Number(image.getAttribute("rotangle")) + 90;
  image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
  image.setAttribute("rotangle", "" + rotateAngle);
}

.rotater {
  transition: all 0.3s ease;
  border: 0.0625em solid black;
  border-radius: 3.75em;
}

<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>

编辑

已删除模数，看起来有点奇怪。

- rioV8