57

我需要用 javascript 以 90 度的间隔旋转图像。我尝试了一些库，如jQuery rotate和Raphaël，但它们有同样的问题 - 图像围绕其中心旋转。我在图像的各个方面都有一堆内容，如果图像不是完全正方形，它的一部分最终会出现在该内容之上。我希望图像保留在其父 div 中，该 div 设置了 max-with 和 max-height 。

像这样使用 jQuery 旋转（http://jsfiddle.net/s6zSn/1073/）：

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

结果如下：

jQuery 旋转是如何工作的

这是我想要的结果：

我希望它如何工作

任何人都知道如何做到这一点？

4

9 回答 9

70

您使用CSStransform（必要时带有供应商前缀）和的组合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>

于 2013-05-28T14:22:58.467 回答
11 
var angle = 0;
$('#button').on('click', function() {
    angle += 90;
    $('#image').css('transform','rotate(' + angle + 'deg)');
});

试试这个代码。

于 2013-05-28T14:16:14.340 回答
10

不再需要 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"/>

于 2018-08-13T08:07:35.773 回答
3

我看过你的运行代码。你的代码中有一行更正。

写：

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

代替：

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

你会得到你想要的输出，希望这是你想要的。

于 2013-05-30T08:04:24.290 回答
3

可以应用 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-xandtransform-y值应该是这个值

链接：

CSS的变换原点| MDN

于 2013-05-28T14:37:54.857 回答
3

我认为这会奏效。

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

希望这可以帮助。这是和我一起工作。

于 2019-09-17T09:14:08.093 回答
3

希望这可以帮到你！

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

试试看

于 2016-07-20T06:16:32.087 回答
2

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

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

于 2013-05-28T14:17:05.863 回答
0

根据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"/>

编辑

删除了模数，看起来很奇怪。

于 2018-08-16T14:20:41.093 回答