css3でimgを左右反転するように設定する方法

CSS3 では、Transform 属性を使用して、img 要素の水平方向の反転を設定できます。Transform 属性は、要素の 2D または 3D 変換を設定するために使用されます。rotateY() メソッドは、要素の水平方向の反転を設定するために使用されます。 Y 軸に沿った要素の 3D 回転。構文「Picture Element {transform:rotateY(angle value);}」。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3でimgの水平反転を設定する方法

cssでは画像をY軸を中心に180度回転させて画像を反転させることができます

例は以下のとおりです。

test.html という名前の新しい HTML ファイルを作成して、CSS が画像を反転する方法を説明します。

img タグを使用してテスト用のイメージを作成します。 imgタグのclass属性をmypicに設定します。

css タグでは、class 属性を通じて画像のスタイルを設定します。次に、transform 属性を使用して、rotateY を通じてイメージを Y 軸上で 180 度回転し、それによってイメージを反転します。

ブラウザで test.html ファイルを開いて効果を確認します。

概要:

1. img タグを使用して画像を作成し、img タグの class 属性を mypic に設定します。

2. css タグで、class 属性を通じて画像のスタイルを設定します。

3. css タグで、transform 属性を使用して、rotateY を通じて画像を Y 軸上で 180 度回転させ、画像を反転します。

4. ブラウザで test.html ファイルを開いて効果を確認します。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がcss3でimgを左右反転するように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。