在html中旋转图像源中的图像答案

【问题标题】：Rotate an image in image source in html在html中旋转图像源中的图像
【发布时间】：2013-12-02 10:17:35
【问题描述】：

有没有一种方法可以在我的图像代码源中添加可以旋转我的图像？

类似这样的：

<img id="image_canv" src="/image.png" rotate="90">

我正在使我的图像动态化，所以我想知道是否可以附加一些额外的代码来旋转它。

【问题讨论】：

是否可以从后端旋转我的产品图像，就像我将导入的产品图像作为横向我需要旋转为纵向一样。

标签： html image rotation src

【解决方案1】：

如果你的旋转角度相当均匀，你可以使用 CSS：

<img id="image_canv" src="/image.png" class="rotate90">

CSS：

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

否则，您可以通过在 HTML 中设置数据属性，然后使用 Javascript 添加必要的样式来做到这一点：

<img id="image_canv" src="/image.png" data-rotate="90">

示例 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 
    });
});

演示：

http://jsfiddle.net/verashn/6rRnd/5/

【讨论】：

我在寻找另一种通过服务器旋转图像的方法，因为我正在尝试裁剪图像，当我使用 webkit 转换或 jqueryrotate 时，我的似乎有问题裁剪器，所以我希望我可以加载旋转的图像。
您能提供更多上下文和/或示例吗？

【解决方案2】：

你可以这样做：

<img src="your image" style="transform:rotate(90deg);">

这更容易。

【讨论】：

最简单最简单的解决方案真的:) 谢谢

【解决方案3】：

这个 CSS 似乎可以在 Safari 和 Chrome 中使用：

div#div2
{
-webkit-transform:rotate(90deg); /* Chrome, Safari, Opera */
transform:rotate(90deg); /* Standard syntax */
}

在体内：

<div id="div2"><img src="image.jpg"  ></div>

但这（和上面的 .rotate90 示例）将旋转后的图像推到页面上比未旋转时更高的位置。不确定如何控制图像相对于文本或其他旋转图像的位置。

【讨论】：

将 "style="z-index: 1" 添加到您正在旋转的对象，并将 style="z-index: 2" （或任何大于 1 的数字）添加到文本或您的任何内容想要显示在顶部。

【解决方案4】：

这可能是您的无脚本解决方案：http://davidwalsh.name/css-transform-rotate

所有带前缀的浏览器都支持它，在 IE10-11 和所有仍在使用的 Firefox 版本中，不带前缀。

这意味着，如果您不喜欢旧的 IE（网页设计师的祸根），您可以跳过 -ms- 和 -moz- 前缀以节省空间。

但是，Webkit 浏览器（Chrome、Safari、大多数移动导航器）仍然需要 -webkit-，而且在 Next Opera 之前仍有大量追随者，使用 -o- 是明智的。

【讨论】：