csで反転効果を実現する方法

CSS で反転効果を実現する方法: 1. 外側要素の視点を設定します; 2. 2 番目のラッピング層を 180 度反転し、遷移速度を設定します; 3. "backface-visibility" を設定します; 4 . 「z-index」属性を設定する; 5. 最初に「戻る」を180度反転させます。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS3 で反転効果を実現します

今日は、比較的単純な CSS3 を使用して反転効果を実現します。

アニメーション効果

##効果分析

マウスがそれを含むブロック上をスライドしたときでは、要素全体を 180 度反転させて、「表」側と「裏側」の切り替えを実現します。

HTML 解析

解析: アニメーション効果を実現するために

.container、.flip が用意されています。 .front,.back各パッケージには 1 つの写真が含まれています。 この効果を実現するための HTML は次のとおりです:

<p class="container">
    <p class="flip">
        <p class="front">
            <img src="images/pic00.jpg" alt="">
        </p>
        <p class="back">
            <img src="images/pic01.jpg" alt="">
        </p>
    </p>
</p>

CSS 解析

1. 要素のレイアウト

上記の効果を実現するために、要素のレイアウトが実行されます。初め。

.front と .back を .flip に対して絶対的に配置し、同じ位置で重なるようにします。 レイアウト部分のコードは以下のとおりです。

    .container,.front,.back{width:380px;height:270px;}
    .flip{position:relative;}
    .front,.back{position:absolute;top: 0px;left: 0px;}

設定後、

.backの画像が.frontの上にあることがわかりましたので、 .frontSet .fornt{z-index:2;}

注: overflowを設定しないでください。要素のオーバーフローを防ぐために属性を使用すると、3D 効果が得られなくなります。

w3 仕様では次のように説明されています:

次の CSS プロパティ値では、適用する前にユーザー エージェントが子孫要素のフラット化された表現を作成する必要があるため、使用される変換スタイルの値を flat:

• overflow:visible 以外の任意の値。

• opacity:1 未満の任意の値

• filter: none 以外の任意の値。

• clip: auto 以外の任意の値。

2. アニメーション効果の実装

(1) アニメーション効果を実現するには、まず祖先要素

.container,.flip## に以下の属性を設定します。 # 3D 効果をトリガーし、アニメーションを設定します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.container{perspective:1000;transform-style:preserve-3d;} .flip{transition:0.6s;transform-style:preserve-3d;}</pre><div class="contentsignin">ログイン後にコピー</div></div>(2) 次に、画像を反転したときに裏側が露出しないようにするために、

backface-visibility を

に設定します。 front,.back 属性: .front,.back{backface-visibility:hidden;}
(3)マウスがその上をスライドすると、含まれているブロックが 180 度反転し、「正」側と「逆」側の切り替えを実現します。背面の要素に

transform:rotateY(-180deg)

を設定すると、.back が表示されなくなります。 (4) 最後に、ユーザーのマウスが

.container

を含むブロック上でスライドすると、.flip が 180 度反転し、.front## が表示されます。 #180 度反転します。裏側は hidden なので表示されません。また、.back は、180 度反転した後、0 度に戻り、表面が表示されます。裏側が見えること。 コードは次のとおりです。

    .container{perspective:1000;transform-style:preserve-3d;}
    .container,.front,.back{width:380px;height:270px;}
    .flip{position:relative;transition:0.6s;transform-style:preserve-3d;}
    .front,.back{position:absolute;top: 0px;left: 0px;backface-visibility:hidden;}
    .front{z-index:2;}
    .back{transform:rotateY(-180deg);}
    .container:hover .flip{transform:rotateY(180deg);}

垂直反転効果の実装

垂直効果は水平反転と同じです。しかし、単にrotateYをrotateXに置き換えると、画像の一番上の行が反転していることがわかります。

注意: 上記の CSS コードでは、

.flip

の幅と高さを設定していないため、
transform:rotateY(180deg) を .flip## に適用するときに、 #、デフォルトの transform-origin 値に従って、要素の中心点が反転の基本点として使用されます。ここの .flip の高さは 0 なので、当然一番上の行を基準に反転されます。したがって、解決策は 2 つあります。

.flip

に
1. .front

   、.back high と同じ幅を設定します。 。

   transform-origin:100% 135px/*高さの半分*/
属性を
2. .flip

   に設定します。 OK、垂直方向の反転が希望する効果であることがわかります。
   概要

1. アイデア

(1) 3D 効果を実現するために、最も外側の要素

perspective

を設定します。

(2) マウスが最も外側の要素上をスライドすると、2 番目のラッピング層が 180 度反転し、遷移速度を設定します。

(3) 2 つのフリップ ブロックは、同じ位置に重ね合わせられるように絶対的に配置されます。また、アニメーション効果を実装するときに裏側が露出しないように、backface-visibility を設定します。
(4)
z-index 属性を .front
に設定して、コードを記述して表示するときに前面にくるようにします。 (5) .back を最初に 180 度回転させて、後ろから人物を表示します。

2. 発生した問題:

(1) パッケージ ブロック内でサイズの異なる 2 つの画像を同じサイズにするために、overflow 属性が使用され、3D 効果が使用されます。達成できません。解決策: img に width:100%;height:100%;
を設定します (2) .flip の高さが 0 であることに気づきませんでした。 , したがって、標準点誤差は、垂直方向に反転するときにさまざまな影響を及ぼします。
(3) さらに書くことでのみ、より多くのエラーを見つけることができ、エラーの見つけ方と解決方法がわかります。

[推奨学習: css ビデオ チュートリアル ]

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