CSSとHTMLで画像を回転させる方法

Webページ上の画像の回転は、 CSS に追加される回転クラス 画像を回転させるタグ。

回転画像

CSSを使用して画像を回転する

CSSコードには、主要なインターネットごとに変換コードを含める必要があります ブラウザ 、したがって、画像はすべてのブラウザで回転します。

Windowsでキーボードショートカットを作成する方法

以下は、画像を180度回転させるCSSコードの例です。

.rotateimg180 { -webkit-transform:rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

上記のCSSコードは、HTMLでリンクされている.cssスタイルシートファイルに追加する必要があります。たとえば、CSSファイルの名前がsite.cssで、HTMLファイルと同じディレクトリにある場合、次のHTMLを 素子:

大文字を小文字に変更する

または、CSSコードをインラインで含めることもできます。 スタイルタグ 画像タグの前、または スタイル 画像タグの属性。

CSSコードが.cssファイル、スタイルシート、またはタグに適用されると、任意の画像タグでCSSクラス名を使用できます。

msペイントの色を反転する方法
 
ヒント

画像を別の角度で回転させるには、CSSコードの「180」を変更して あなたが望む程度にタグを付けます。

回転画像の例

以下は、上記のCSSコードを使用したロゴの例です。ブラウザがCSS回転をサポートしている場合、ロゴは180度回転しているように見えます。

ロゴ