Web blog WEBブログ

CSSで画像やコンテンツを左右反転させる方法

2023.04.14

※この記事は2023年04月14日時点の情報をもとに作成されました。

こんにちは。コーダーの兼山です。
画像やコンテンツを左右上下に反転させる方法を紹介します。

見本データ

 

画像はこの画像を使用します。

CSSのtransformプロパティを使って、反転させます。

左右に反転させる

scaleでは、負の値が設定できます
x軸でマイナス1を設定することで左右反転させることが出来ます。

上下に反転させる

scaleでは、負の値が設定できます
y軸でマイナス1を設定することで左右反転させることが出来ます。

まとめ

CSSで画像やコンテンツを左右反転させる方法を紹介しました。

ご相談・カスタマイズご依頼

弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

この記事を読んだ方はこんな記事も読んでいます

こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…

こんにちは。コーダーの兼山です。 最近、ブロック要素の境界を跨いだテキストを、ブロックに重なる部分、そうでない部分で異な…

こんにちは。コーダーの兼山です。 サイズや比率がバラバラの画像を、CSSで同じサイズにトリミングする方法を紹介します。 …

無料相談窓口