CSSを使用して画像を反転する方法

1. 水平反転: 画像を水平方向に反転させるには、CSSのtransformプロパティを使用します。以下のコードを使用します。

.flip-horizontal {
  transform: scaleX(-1);
}

このコードは、指定した要素内の画像を水平方向に反転します。要素に適用するために、クラス名「flip-horizontal」を使用します。

2. 垂直反転: 画像を垂直方向に反転させるには、以下のコードを使用します。

.flip-vertical {
  transform: scaleY(-1);
}

このコードは、指定した要素内の画像を垂直方向に反転します。要素に適用するために、クラス名「flip-vertical」を使用します。

3. 斜め反転: 画像を斜め方向に反転させるには、以下のコードを使用します。

.flip-diagonal {
  transform: scaleX(-1) scaleY(-1);
}

このコードは、指定した要素内の画像を斜め方向に反転します。要素に適用するために、クラス名「flip-diagonal」を使用します。

これらのコード例を使用することで、画像を簡単に反転させることができます。適用する要素に対して適切なクラス名を使用し、必要に応じてCSSセレクタを使用して要素を指定してください。