jQuery 使用javascript旋转图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16794310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotate image with javascript
提问by TheQ
I need to rotate an image with javascript in 90-degree intervals. I have tried a few libraries like jQuery rotateand Rapha?l, but they have the same problem - The image is rotated around its center. I have a bunch of content on all sides of the image, and if the image isn't perfectly square, parts of it will end up on top of that content. I want the image to stay inside its parent div, which has max-with and max-height set.
我需要以 90 度的间隔使用 javascript 旋转图像。我尝试了一些库，如jQuery rotate和Rapha?l，但它们有同样的问题 - 图像围绕其中心旋转。我在图像的所有边上都有一堆内容，如果图像不是完美的方形，它的一部分最终将位于该内容之上。我希望图像保留在其父 div 内，该 div 设置了 max-with 和 max-height。
Using jQuery rotate like this (http://jsfiddle.net/s6zSn/1073/):
像这样使用 jQuery 旋转（http://jsfiddle.net/s6zSn/1073/）：
var angle = 0;
$('#button').on('click', function() {
angle += 90;
$("#image").rotate(angle);
});
Results in this:
结果如下：
And this is the result i would like instead:
这是我想要的结果：
Anyone have an idea on how to accomplish this?
任何人都知道如何实现这一目标？
回答by Niet the Dark Absol
You use a combination of CSS's transform(with vendor prefixes as necessary) and transform-origin, like this: (also on jsFiddle)
您使用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>回答by Harsha Venkatram
var angle = 0;
$('#button').on('click', function() {
angle += 90;
$('#image').css('transform','rotate(' + angle + 'deg)');
});
Try this code.
试试这个代码。
回答by Prachi Jain
i have seen your running code .There is one line correction in your code.
我已经看到您的运行代码。您的代码中有一行更正。
Write:
写：
$("#wrapper").rotate(angle);
instead of:
代替：
$("#image").rotate(angle);
and you will get your desired output,hope this is what you want.
你会得到你想要的输出，希望这是你想要的。
回答by Anuga
No need for jQuery and lot's of CSS anymore (Note that some browsers need extra CSS)
不再需要 jQuery 和大量 CSS（请注意，某些浏览器需要额外的 CSS）
Kind of what @Abinthaha posted, but pure JS, without the need of jQuery.
类似于@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"/>回答by Man Sun
Hope this can help you!
希望这可以帮到你！
<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>
回答by Om Shankar
CSS can be applied and you will have to set transform-origincorrectly to get the applied transformation in the way you want
可以应用 CSS，您必须transform-origin正确设置才能以您想要的方式获得应用的转换
See the fiddle:
见小提琴：
http://jsfiddle.net/OMS_/gkrsz/
http://jsfiddle.net/OMS_/gkrsz/
Main code:
主要代码：
/* 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 and JS:
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) );
Logic:
逻辑：
Divide the image's height by 2. The transform-xand transform-yvalues should be this value
将图像的高度除以 2。transform-x和transform-y值应该是这个值
Link:
链接：
transform-originat CSS | MDN
CSS 中的transform-origin| MDN
回答by Wojciech Bednarski
You can always apply CCS class with rotateproperty - http://css-tricks.com/snippets/css/text-rotation/
您始终可以应用带有rotate属性的CCS 类- http://css-tricks.com/snippets/css/text-rotation/
To keep rotated image within your divdimensions you need to adjust CSS as well, there is no needs to use JavaScript except of adding class.
为了将旋转的图像保持在您的div尺寸内，您还需要调整 CSS，除了添加类之外，无需使用 JavaScript。
回答by Nguyen Hai DANG
I think this will work.
我认为这会奏效。
document.getElementById('#image').style.transform = "rotate(90deg)";
Hope this helps. It's work with me.
希望这可以帮助。这是和我一起工作。
回答by rioV8
Based on Anugaanswer I have extended it to multiple images.
基于Anuga 的回答，我已将其扩展到多个图像。
Keep track of the rotation angle of the image as an attribute of the image.
跟踪图像的旋转角度作为图像的一个属性。
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"/>Edit
编辑
Removed the modulo, looks strange.
去掉了模数，看起来很奇怪。
