Html 在html中旋转图像源中的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20061774/
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 an image in image source in html
提问by marchemike
Is there a way I could add in the source of my image codes that could rotate my image?
有没有办法可以添加可以旋转我的图像的图像代码源？
Something like this:
像这样的东西：
<img id="image_canv" src="/image.png" rotate="90">
I'm making my images dynamic, so I was wondering if I could append some extra code to rotate it if I want it to.
我正在使我的图像动态化，所以我想知道是否可以附加一些额外的代码来旋转它，如果我愿意的话。
回答by VLS
If your rotation angles are fairly uniform, you can use CSS:
如果您的旋转角度相当一致，您可以使用 CSS：
<img id="image_canv" src="/image.png" class="rotate90">
CSS:
CSS：
.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
Otherwise, you can do this by setting a data attribute in your HTML, then using Javascript to add the necessary styling:
否则，您可以通过在 HTML 中设置数据属性，然后使用 Javascript 添加必要的样式来完成此操作：
<img id="image_canv" src="/image.png" data-rotate="90">
Sample jQuery:
示例jQuery：
$('img').each(function() {
var deg = $(this).data('rotate') || 0;
var rotate = 'rotate(' + deg + 'deg)';
$(this).css({
'-webkit-transform': rotate,
'-moz-transform': rotate,
'-o-transform': rotate,
'-ms-transform': rotate,
'transform': rotate
});
});
Demo:
演示：
回答by user9770563
You can do this:
你可以这样做：
<img src="your image" style="transform:rotate(90deg);">
it is much easier.
这要容易得多。
回答by chuckkahn
This CSS seems to work in Safari and Chrome:
这个 CSS 似乎适用于 Safari 和 Chrome：
div#div2
{
-webkit-transform:rotate(90deg); /* Chrome, Safari, Opera */
transform:rotate(90deg); /* Standard syntax */
}
and in the body:
在体内：
<div id="div2"><img src="image.jpg" ></div>
But this (and the .rotate90 example above) pushes the rotated image higher up on the page than if it were un-rotated. Not sure how to control placement of the image relative to text or other rotated images.
但这（以及上面的 .rotate90 示例）将旋转的图像推到页面上的位置比未旋转时更高。不确定如何控制图像相对于文本或其他旋转图像的位置。
回答by gchiconi
This might be your script-free solution: http://davidwalsh.name/css-transform-rotate
这可能是您的无脚本解决方案：http: //davidwalsh.name/css-transform-rotate
It's supported in all browsers prefixed and, in IE10-11 and all still-used Firefox versions, unprefixed.
它在所有带前缀的浏览器中都受支持，在 IE10-11 和所有仍在使用的 Firefox 版本中，不带前缀。
That means that if you don't care for old IEs (the bane of web designers) you can skip the -ms-and -moz-prefixes to economize space.
这意味着如果您不关心旧的 IE（网页设计师的祸根），您可以跳过-ms-和-moz-前缀以节省空间。
However, the Webkit browsers (Chrome, Safari, most mobile navigators) still need -webkit-, and there's a still-big cult following of pre-Next Opera and using -o-is sensate.
然而，Webkit 浏览器（Chrome、Safari、大多数移动导航器）仍然需要-webkit-，并且仍然有大量的 pre-Next Opera 追随者，并且使用起来-o-很有意义。
