在HTML中旋转图像源中的图像

Question

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

类似于这样：

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

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

- marchemike

---

我能否从后台旋转我的产品图像，就像我将产品图像作为横向导入时需要旋转为纵向一样。 - Gem

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

- VLS

---

我有点想寻找另一种通过服务器旋转图像的方式，因为我正在尝试裁剪图像，当我使用webkit transform或jqueryrotate时，我的裁剪器似乎存在问题，所以我希望能够加载旋转后的图像。 - marchemike

你能提供更多上下文或者例子吗？ - VLS

Answer 2

你可以这样做：

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

这要容易得多。

- user9770563

---

<img src="Image.jpeg" style="transform:rotate(90deg);"> - user9770563

最简单、最容易的解决方案 :) 谢谢。 - Shahin

Answer 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示例）会使旋转后的图像在页面上向上推移，而不像未旋转的图像那样。不确定如何控制图像与文本或其他旋转图像之间的位置关系。

- chuckkahn

---

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

Answer 4

这可能是您无需脚本的解决方案: http://davidwalsh.name/css-transform-rotate 它在所有浏览器中都有前缀支持，在IE10-11和所有仍在使用的Firefox版本中没有前缀支持。

这意味着，如果您不关心旧版IE（Web设计师的噩梦），则可以跳过-ms-和-moz-前缀以节省空间。

然而，Webkit浏览器（Chrome，Safari，大多数移动导航器）仍需要-webkit-，并且仍有大量追随者使用先前的Opera并使用-o-。

- gchiconi