在html图像源中旋转图像

76

有没有一种方法可以添加图像代码源，从而可以旋转图像？

像这样：

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

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

— 马尔基迈克
source

是否可以从后端旋转我的产品图像，就像我需要将进口的产品图像作为风景一样旋转为人像一样。

— 宝石

100

如果旋转角度相当均匀，则可以使用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
source

我正在某种程度上寻找通过服务器旋转图像的另一种方法，因为我正在尝试裁切图像，并且当我使用webkit transform或jqueryrotate时，裁切器似乎出现了问题，所以我希望我可以加载旋转的图像。

— marchemike

您能否提供更多背景信息和/或示例？

— VLS

63

你可以这样做：

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

这要容易得多。

— 用户名
source

— user9770563

2

实际上，最简单，最简单的解决方案是：)谢谢

— Shahin19年

4

该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示例）将旋转后的图像在页面上推得比未旋转时高。不确定如何控制图像相对于文本或其他旋转图像的放置。

— 恰克卡恩
source

加上“风格=”的z-index：1"你旋转对象和风格=‘的z-index：任何你想显示在顶部的文本或2’（或任意数量大于1）

— user3241874

1

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

IE10-11和所有仍在使用的Firefox版本中，所有带前缀的浏览器均支持该功能，并且不带前缀。

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

但是，Webkit浏览器（Chrome，Safari，大多数移动导航器）仍然需要-webkit-，并且对Next-Next Opera的-o-追捧仍然很大，并且使用很敏感。

— 吉奇科尼
source