CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで鏡像（反転画像）を作成する方法

CSSのFlipフィルターとは

Flipエフェクトは、オブジェクトの鏡像（反転した画像）を作成するために使用されるフィルターです。このフィルターでは、反転の方向に応じて以下の2つのパラメータを使い分けることができます。

パラメータ説明
FlipH水平方向の鏡像（左右反転）を作成する
FlipV垂直方向の鏡像（上下反転）を作成する

使用例

以下のコードを実行すると、画像やテキストの鏡像を作成できます。画像要素に対して Filter: FlipH を指定すれば左右反転が、Filter: FlipV を指定すれば上下反転が適用されます。

<html>
   <head>
   </head>
   <body>

      <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: FlipH">
      <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: FlipV">

      <p>テキストの例：</p>

      <div style="width: 300;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         Filter: FlipV">CSS Tutorials</div>
   </body>

</html>

注意：モダンブラウザでの代替方法

Filter: FlipH / FlipV はInternet Explorer向けの独自拡張であり、現在の主要ブラウザでは動作しない点に注意が必要です。モダンブラウザで同様の鏡像効果を実現するには、CSSの transform プロパティを使用するのが標準的な方法です。

/* 左右反転（水平方向の鏡像） */
.mirror-h {
  transform: scaleX(-1);
}

/* 上下反転（垂直方向の鏡像） */
.mirror-v {
  transform: scaleY(-1);
}

transform プロパティはすべての最新ブラウザでサポートされており、画像だけでなくテキストや任意のHTML要素にも適用できるため、現在のWeb制作ではこちらの手法が推奨されています。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>