web-dev-qa-db-ja.com

HTMLの画像ソース内の画像を回転させる

画像を回転させることができる画像コードのソースに追加できる方法はありますか？

このようなもの：

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

画像を動的にしているので、必要に応じて回転させるために追加のコードを追加できるかどうかと思いました。

htmlimagerotationsrc
55
marchemike

回転角がかなり均一であれば、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/

77
VLS

あなたはこれを行うことができます：

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

それはずっと簡単です。

20
user9770563

この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の例）は、回転されていない場合よりも回転された画像をページの上に押し上げます。テキストや他の回転画像に対する画像の配置を制御する方法がわからない。

2
chuckkahn

Javascriptにこれのためのプラグインがあります。

https://code.google.com/p/jqueryrotate/ outを確認してください。

0
Hozikimaru

これはあなたのスクリプト不要の解決策かもしれません： http://davidwalsh.name/css-transform-rotate

接頭辞が付いたすべてのブラウザ、および接頭辞が付いていないIE10-11およびまだ使用されているすべてのFirefoxバージョンでサポートされています。

つまり、古いIE（Webデザイナーの悩みの種）を気にしないのであれば、スペースを節約するために-ms-と-moz-のプレフィックスを省略することができます。

しかし、Webkitブラウザ（Chrome、Safari、ほとんどのモバイルナビゲータ）はまだ-webkit-を必要としており、Next-Operaの前にはまだ大きなカルト的な追従があり、-o-を使うのは賢明です。

0
gchiconi