使用javascript旋转图像

Question

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

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

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

结果如下：

这是我想要的结果：

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

Answer 1

您使用CSS's transform（必要时包含供应商前缀）和transform-origin的组合，如下所示：(also on 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>

Answer 2

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

试试这段代码。

Answer 3

我已经看到了您正在运行的代码。您的代码中有一行校正。 写 $（ “＃包装”）旋转（角度）; 而不是$（“＃image”）。rotate（angle）;你会得到你想要的输出，希望这就是你想要的。

Answer 4

可以应用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

Answer 5

希望这可以帮到你！

<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

Answer 6

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

来应用CCS类

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

Answer 7

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

Answer 8

基于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"/>

修改

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

Answer 9

我认为这会起作用。

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

希望这会有所帮助。跟我一起工作。