css3特殊効果の3Dフロップ効果の詳細例
この記事では主に 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>上記がこの記事の主な内容です。皆さんのお役に立てれば幸いです。
【おすすめチュートリアル】
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1664
14
1423
52
1317
25
1268
29
1243
24
純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例)
Jun 28, 2022 pm 01:39 PM
純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。
CSSを上手に使って色々な変わった形のボタンを実現（コード付き）
Jul 19, 2022 am 11:28 AM
この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。
スペースを取らずにCSS内の要素を非表示にする方法
Jun 01, 2022 pm 07:15 PM
2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。
CSS3でレースボーダーを実装する方法
Sep 16, 2022 pm 07:11 PM
CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレース スタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。
CSS3でマウスクリックで画像を拡大する方法
Apr 25, 2022 pm 04:52 PM
実装方法: 1. ":active" セレクターを使用して、画像上のマウス クリックの状態を選択します; 2. 変換属性とscale() 関数を使用して、画像の拡大効果を実現します。構文 "img:active {transform : スケール(x 軸倍率、y 軸倍率);}"。
テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。
Jun 10, 2022 pm 01:00 PM
テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。
CSS3でアニメーションの回転速度を設定する方法
Apr 28, 2022 pm 04:32 PM
CSS3 では、「animation-timing-function」属性を使用してアニメーションの回転速度を設定できます。この属性は、アニメーションがサイクルを完了する方法を指定し、アニメーションの速度曲線を設定するために使用されます。構文は「element {アニメーションタイミング関数: 速度属性値;}"。
css3のアニメーション効果に変形はありますか？
Apr 28, 2022 pm 02:20 PM
css3 のアニメーション効果には変形があり、「animation: アニメーション属性 @keyframes ..{..{transform: 変換属性}}」を使用して変形アニメーション効果を実現できます。アニメーション属性はアニメーション スタイルを設定するために使用され、変形スタイルを設定するには、transform 属性を使用します。
