ホームページ > 記事 > ウェブフロントエンド > css3特殊効果の3Dフロップ効果の詳細例
css3特殊効果の3Dフロップ効果の詳細例
- WBOY転載
- 2016-05-16 12:03:255277ブラウズ
この記事では主に 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>上記がこの記事の主な内容です。皆さんのお役に立てれば幸いです。
【おすすめチュートリアル】