コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3で3D反転効果を実現する方法

CSS3で3D反転効果を実現する方法

青灯夜游
リリース： 2023-01-05 16:10:28
オリジナル
7338 人が閲覧しました

CSS3 では、transform 属性をrotateY() やrotateX() などの 3D 回転関数とともに使用して、3D 反転効果を実現できます。 rotateX() は X 軸を中心に指定された角度で要素を回転でき、rotateY() は Y 軸を中心に指定された角度で要素を回転できます。

CSS3で3D反転効果を実現する方法

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

1. 画像の反転を実現します

1. HTML の構造

<div class="stage">
    <div class="flipBox">
        <figure class="pic front">Front</figure>
        <figure class="pic back">Back</figure>
    </div>
</div>
ログイン後にコピー

上記の HTML の構造は次のとおりです。 :

  • p.stage は 3D ステージを指定します。基本的に、CSS3 3D 変換を使用するすべての実装がこれを行い、遠近効果を実現する遠近スタイルを指定します。
  • p.flipBox は、実際の実装です。翻訳 前面のコンテナは後で 3D 変換されます
  • figure は 2 つの画像を表します。1 つは前面、もう 1 つは背面です。

アイデアは次のとおりです。figure.front と Figure を結合します。 .back は画像の表と裏を反転します。画像が反転されると、figure.back はユーザーに面する側になり、figure.front はユーザーの反対側を向きます。

初期状態では、figure.back は水平方向に反転されています (つまり、transform:rotateY(180deg))。そのため、画像が反転された後、背面のテキストが直立して表示されます (そうしないと、画像のテキストが直立して表示されます)。ひっくり返すと背中が逆さまになります） ——反転する前は直立していましたからね～）。

3. CSS 構造 

body,figure {
    margin: 0;
    padding: 0;
}
.stage {
    width: 200px;
    height: 100px;
    margin: 40px;
    perspective: 1000px;
}
.flipBox {
    width: 200px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.pic {
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}
.front {
    background: #f00;
}
.back {
    background: #090;
    transform: rotateY(180deg);
}
ログイン後にコピー

各要素の CSS を分析します: 

body,figure {
    margin: 0;
    padding: 0;
}
ログイン後にコピー

何も言うことはなく、内側と外側を削除します。余白！ 

.stage {
    width: 200px;
    height: 100px;
    margin: 40px;
    perspective: 1000px;
}
ログイン後にコピー

3D ステージのスタイルを定義します。変形をより完全に表示できるように、マージンはブラウザの左上と上からある程度の距離を取る必要があります。遠近感は、3D 要素とカメラ (または人間の目) の間の距離を指定します。値が小さいほど、3D 要素は人間の目に近くなります。値が大きいほど、3D 要素は人間の目から遠くなります。 

.flipBox {
    width: 200px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}
ログイン後にコピー

ボックスを反転するためのスタイルを定義します。この要素は、実際に 3D 変換を実行する要素です。そのposition 属性は、2 つの子 Figure 要素を p.flipBox の左上隅に配置して 2 つの図を整列できるように、2 つの子 Figure 要素のアンカー ポイントを作成します。 transform-style 属性は必須です。これは、p.flipBox 要素の子孫要素が 3D で変換される形式を指定します (preserve-3d は、子孫要素が引き続き 3D モードで変換されることを意味します。他の値 flat は、単に 3D モードで変換されることを意味します) p .flipBox は 3D 変換を実行し、子孫要素は 3D 変換を行わない p.flipBox プレーンのコンテンツのみになります)。これは After Effect の疑似 3D と非常によく似ています。 Transition は、transform 属性のみを変換することを規定しており、時間は 1 秒です。 

.pic {
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}
ログイン後にコピー

2 つの画像 (ここでは 2 つの図) の統一スタイルを指定します。絶対配置を使用して p.flipBox の左上隅を配置します。2 つの図は同じサイズなので、完全に重なり合います。 Backface-visibility は重要な属性です。これは、ユーザーの反対側を向いている 3D 要素を表示するかどうかを指定します。これを非表示 (非表示) に設定する必要があります。そうしないと、背面を表示すべきでないときに背面が表示されます。例えば、初期状態では当然figure.backは表示されないはずですが、figure.backはポストレンダリングされているため、figure.frontに重ねて表示されます。正面はユーザーの反対側を向いているため、表示されません。別の例として、反転後、figure.front は Figure.back の前になりますが、この時点では、figure.front はユーザーの反対側を向くため、backface-visibility によって隠されます。これはまさに私たちが望んでいることです。 

.front {
    background: #f00;
}
ログイン後にコピー

絵の表側が赤であることが規定されています。 

.back {
    background: #090;
    transform: rotateY(180deg);
}
ログイン後にコピー

は図の背面を緑色にすることを指定すると同時に、transform:rotateY(180deg)は初期状態でfigure.backを水平に180度反転することを指定します。

3. 画像の回転を開始します

.stage:hover .flipBox {
 transform: rotateY(-180deg);
}
ログイン後にコピー

マウスが 3D ステージに移動したら、p.flipBox を -180 度回転して画像を完成させます反転効果。ここでp.flipBoxを180度回転させることも可能ですが、回転方向が異なります。
CSS3で3D反転効果を実現する方法

#2. 事例

1. 画像の準備

はHTTP リクエストを減らすために、ここではスプライトを使用します。


CSS3で3D反転効果を実現する方法 画像のサイズは 200*200 で、上下に分かれており、上が反転した画像 (白黒) の表面、下が裏面です。反転した画像（カラー）。上下のロゴは水平方向と垂直方向の中央に配置されており、反転する前後でロゴが同じ位置にあることが保証されます。

2. コードの実装

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript Study</title>
    <style>
        html,body,ul,li,a,figure,h4 {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        h4 {
            display: none;
        }
        .Stage {
            width: 604px;
            height: 203px;
            margin: 50px;
            border-left: 1px solid #f5f5f5;
            border-top: 1px solid #f5f5f5;
            perspective: 10000px;
        }
        .trigger {
            display: block;
            float: left;
            width: 200px;
            height:100px;
            border-right: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
            position: relative;
        }
        .flipBox {
            display: block;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 1.2s;
            transition-delay: 0.03s;
        }
        .trigger:hover .flipBox {
            transform: perspective(10000px) rotateY(-180deg);    /*这里的perspective为每个flipBox规定单独的视点距离，解决Chrome中统一视点的问题*/
        }
        .plane {
            width: 200px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            backface-visibility: hidden;
        }
        .back {
            transform: rotateY(180deg);
        }
        .logo1 figure.front {
            background: url("pic.png") center 0 no-repeat;
        }
        .logo2 figure.front {
            background: url("pic_2.png") center 0 no-repeat;
        }
        .logo3 figure.front {
            background: url("pic_3.png") center 0 no-repeat;
        }
        .logo4 figure.front {
            background: url("pic_4.png") center 0 no-repeat;
        }
        .logo5 figure.front {
            background: url("pic_5.png") center 0 no-repeat;
        }
        .logo6 figure.front {
            background: url("pic_6.png") center 0 no-repeat;
        }
        .logo1 figure.back {
            background: url("pic.png") center -100px no-repeat;
        }
        .logo2 figure.back {
            background: url("pic_2.png") center -100px no-repeat;
        }
        .logo3 figure.back {
            background: url("pic_3.png") center -100px no-repeat;
        }
        .logo4 figure.back {
            background: url("pic_4.png") center -100px no-repeat;
        }
        .logo5 figure.back {
            background: url("pic_5.png") center -100px no-repeat;
        }
        .logo6 figure.back {
            background: url("pic_6.png") center -100px no-repeat;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>
            <a class="flipBox logo1" href="#">
                <h4>Fun Games</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo2" href="#">
                <h4>Man Style</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo3" href="#">
                <h4>Sims.</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo4" href="#">
                <h4>Googla</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo5" href="#">
                <h4>JavaScript</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
        <li>
            <a class="flipBox logo6" href="#">
                <h4>Felix</h4>
                <figure class="plane front"></figure>
                <figure class="plane back"></figure>
            </a>
        </li>
    </ul>
</div>
</body>
</html>
ログイン後にコピー

CSS3で3D反転効果を実現する方法
CSS3で3D反転効果を実現する方法

(学習ビデオ共有:

cssビデオチュートリアル)

以上がCSS3で3D反転効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
3D回転 css transform
ソース：php.cn
前の記事：CSSでマウスのスタイルを変更する方法 次の記事：CSSでパディングを設定する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート