アニメーション効果
.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 効果が得られなくなります。
次の CSS プロパティ値では、適用する前にユーザー エージェントが子孫要素のフラット化された表現を作成する必要があるため、使用される変換スタイルの値を flat:2. アニメーション効果の実装(1) アニメーション効果を実現するには、まず祖先要素
- overflow:visible 以外の任意の値。
- opacity:1 未満の任意の値
- filter: none 以外の任意の値。
- clip: auto 以外の任意の値。
.container,.flip## に以下の属性を設定します。 # 3D 効果をトリガーし、アニメーションを設定します: <pre class="brush:php;toolbar:false">.container{perspective:1000;transform-style:preserve-3d;}
.flip{transition:0.6s;transform-style:preserve-3d;}</pre>(2) 次に、画像を反転したときに裏側が露出しないようにするために、
に設定します。 front,.back 属性: .front,.back{backface-visibility:hidden;}(3)マウスがその上をスライドすると、含まれているブロックが 180 度反転し、「正」側と「逆」側の切り替えを実現します。背面の要素に
を設定すると、.back が表示されなくなります。 (4) 最後に、ユーザーのマウスが
を含むブロック上でスライドすると、.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 つあります。
- に
- .front
、
transform-origin:100% 135px/*高さの半分*/.backhigh と同じ幅を設定します。 。 属性を - .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) さらに書くことでのみ、より多くのエラーを見つけることができ、エラーの見つけ方と解決方法がわかります。