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

CSSを使ったフリップ効果の作り方｜画像やテキストを反転表示する方法

フリップ効果とは、オブジェクトを鏡に映したような反転イメージとして表示するエフェクトです。CSSのフィルタ機能では、以下のパラメータを使って水平・垂直方向の反転を実現できます。

番号パラメータと説明
1FlipH
水平方向（左右）に鏡像反転させたイメージを作成します。
2FlipV
垂直方向（上下）に鏡像反転させたイメージを作成します。

サンプルコード

フリップ効果を設定する基本的な例を見てみましょう。画像とテキストの両方にフィルタを適用しています。

<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>Text Example:</p>
        <div style = "width: 300;
            height: 50;
            font-size: 30pt;
            font-family: Arial Black;
            color:red;
            Filter: FlipV">CSS Tutorials</div>
    </body>
</html>

このコードでは、最初のロゴ画像は左右反転（FlipH）、次のロゴ画像は上下反転（FlipV）で表示されます。さらに、下部の赤いテキスト「CSS Tutorials」にもFlipVが適用され、文字が上下逆さに表示されます。

モダンブラウザでの代替手段

filter: FlipH / FlipV の記法は旧Internet Explorer独自の拡張機能であるため、現在の主要ブラウザでは動作しません。モダンブラウザで同様の反転効果を実現するには、transform プロパティを使用するのが一般的です。

/* 水平方向に反転 */
.fliph {
    transform: scaleX(-1);
}

/* 垂直方向に反転 */
.flipv {
    transform: scaleY(-1);
}

transform を使えば、Internet Explorer以外のすべての最新ブラウザで確実にフリップ効果を表示できるため、現在のWeb制作ではこちらの方法が推奨されています。

  1. CSSで実現するTada（タダ）アニメーション効果の作り方

    CSSを使えば、要素に「Tada」と呼ばれる揺れるようなアニメーション効果を簡単に追加できます。Tadaアニメーションは、要素が左右に傾きながら拡大・縮小を繰り返すことで、ユーザーの注意を引きつける演出としてよく使われます。ロゴやボタンを目立たせたい場面などに効果的です。以下のコードを実行すると、実際にTadaアニメーションの動作を確認できます。サンプルコード<html>    <head>       <style>          .animated {

  2. CSSで作るスイングアニメーション効果の実装方法

    スイング(Swing)アニメーションは、吊り下げられた要素や軸を中心とした要素を、前後・左右に揺らす動きを表現できるCSSアニメーション効果です。振り子のような自然な揺れを再現でき、ロゴやバナー、アイコンなどに注目を集める演出として活用できます。 スイングアニメーションの仕組み スイングアニメーションは、主に次のCSS機能を組み合わせて実装します。 transform-origin: top center; … 要素の上部中央を回転の基点に設定し、ぶら下がっているように見せる @keyframes と rotate() … 回転角度を15°→ -10°→ 5°→ -5°→ 0°と段階的に変化