Question

有没有办法可以添加可以旋转图像的图像代码来源？

这样的事情：

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

我正在使我的图像变得动态，所以我想知道如果我想要它可以附加一些额外的代码来旋转它。

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/

Answer 2

你可以这样做：

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

它更容易。

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

Answer 4

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

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

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

然而，Webkit浏览器（Chrome，Safari，大多数移动导航器）仍然需要-webkit-，并且仍然存在着对下一个Opera之前的狂热追随，并且使用-o-是敏感的。

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

4 个答案: