css3特殊効果の3Dフロップ効果の詳細例-CSSチュートリアル-php.cn

css3特殊効果の3Dフロップ効果の詳細例

WBOY

リリース： 2018-10-30 09:53:23

転載

5323 人が閲覧しました

この記事では主に css3 特殊効果の 3d フロップ効果を紹介します。一定の参考価値があります。興味のある友人は参照してください。お役に立てれば幸いです。。ヘルプ！

私は最近 css3 を学習していますが、彼は本当に上達していることがわかりました。現在の css3 はもはや以前の css ではなく、それが生み出す機能的な効果は私たちの想像を超えています。 flashを実装でき、jsで作成できるエフェクトも作成でき、さらにpsで作成したグラデーション、角丸、影などのエフェクトも記述できます。「もっと深く勉強しましょう（笑）。今日は私も少し勉強しました。主に 3d 効果の一部についてです。3d についてよく分からなかったことがありません。今日は時間があるので勉強するだけです。 .

いわゆる 3d フロップエフェクトは、実際には 2 枚の写真で構成されています。手前の絵と奥の絵が1枚あります。前の絵を回転させると、ある角度に回転すると、後ろの絵もそれに合わせて回転します。どちらかの絵が回転するまで回転するだけです。それは見えませんが、もう 1 つの絵はちょうど回転しようとしているところです。せっかちですか? 一緒に学びましょう、笑~@@@

最初のすべて、html には次のようなレイアウトがあります。

<p class="outer">
    <p class="p1"></p>
    <p class="p2"></p>
</p>

ログイン後にコピー

外側の p を過小評価しないでください。ただし、このコンテンツはこれがないとその後の効果が得られません! レイアウトが完成したら、次はスタイルの作成です。最初に行うことは間違いなく外側です。幅と高さを指定します。自分で決めてください。最初に幅と高さを 200*200 に指定します。外側の作業が完了したので、内側の作業を開始します。ここでは 200*200 を与えます。このときブラウザで見ると、p1とp2が上下に1つずつ表示されていますが、これは正しいです、pはブロック要素であり、1行を占めることを知っておく必要があります。しかし、これは前に述べたことには当てはまりません。表と裏の間には矛盾があるはずです。心配しないで、2 つの p の中心が一致するように絶対位置を指定します:absolute;。 2 つの p を区別するために、ここでは異なる背景色を与える必要があります。事前の準備作業はほぼ完了しました。次に、効果を実現する方法を見てみましょう。

私たちはフロップ効果を達成しようとしています。それを聞くとすぐに、あなたは回転が必要であることがわかります。はい、これには css3 で新しい属性transform:rotatey(?deg) を使用する必要があります。なぜ回転yなのか疑問に思う人もいるかもしれませんが、それはわかりません。反転はもちろん回転します。 y 軸に沿って。したがって、マウスが p に移動するとき、回転効果を達成させる必要があります。次に、外側の p を使用します。どの小さな p を使用しても、マウスが外側をクリックしない限り、同時に回転することはできません。 p、このコードがあります、

.outer:hover .p1{
            transform:rotatey(-180deg);
        }
        .outer:hover .p2{
            transform:rotatey(0deg);
        }

ログイン後にコピー

回転はありますが、トランジション効果のない回転は見た目が悪いため、ここではトランジション効果を与える必要があります。 css3 の新しい属性transition:all 2s; ここでの all は、すべての効果がトランジションされることを意味します。これについて言えば、実際にはまだ対処していないことが 1 つあります。つまり、現在の画像を後ろに回転させ、その直後に後者が表示されるようにする方法です。これは、backface-visibility:hidden; 画像の非常に重要な属性です。変形とは、画像が表示画面上の見えない場所に移動すると、画像が消えることを意味します。つまり、元々正面を向いているときは見えますが、y 軸に沿って 180 度回転すると見えなくなります。この属性を追加しないと、反転した画像が表示されます。回転後は表示されなくなります。そこで、この属性を 2 つの小さな p に追加します。この効果を実現するには、2 つの小さな p のうち 1 つを最初は回転させないようにする必要があります。もう 1 つは後ろにあり、180 度回転していることがわかります。回転するには、すぐに 2 番目の p が表示されませんが、見えない場所まで回転してから 2 番目の p が表示されます。具体的なコードは次のとおりです。

<html><head>
    <title>3D翻牌效果 </title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
        .outer{
           width: 510px;
            height: 340px;
            border: 1px red solid;
            margin: 0 auto;
        }
        .outer p{
           width:510px;
            height: 340px;
            position: absolute;
              transform-style: preserve-3d;
             backface-visibility:hidden;
            transition:all 2s;
        }
        .p1{
           background: url("images/1.jpg");
            transform:rotateY(0);
        }
        .p2{
            background: url("images/2.jpg") no-repeat;
            transform:rotateY(-180deg);
        }
        .outer:hover .p1{
            transform:rotateY(-180deg);
        }
        .outer:hover .p2{
           transform:rotateY(0deg);
        }
    </style></head><body><p class="outer">
    <p class="p1"></p>
    <p class="p2"></p></p></body></html>

ログイン後にコピー

上記がこの記事の主な内容です。皆さんのお役に立てれば幸いです。