ホームページ > 記事 > ウェブフロントエンド > CSS3-3D flick_html/css_WEB-ITnose
CSS3-3D flick_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:27:541765ブラウズ
このケースでは主に css3 と html5 を使用します。js を使用せずにアニメーションを実行することもできます◕.◕
1. まず、必要な主なスタイルを見てみましょう:
perspective
transform
transition
ポジション
クラスリスト
以上です、レベルが限られているので詳しくは言いません！ 2秒、効果を見てください：デモンストレーションエフェクト、Runjs
3つの効果のデフォルトスタイルは上に示すように、とても乱雑に見えます、デモを見てみましょう画像を表示 == デモ効果、runjs
3. HTML 構造は次のとおりです:
3 つのコンテナーと 6 つのボックス、マウスが通過すると:
2.box3 Y 軸を中心に (transform-origin のデフォルトのコンテナの中心)、背面のボックス 4 に 180 度反転します。マウスを遠ざけて元に戻します
3.box5、box6 を Z 軸の周りに配置し (transform-origin はそれぞれコンテナの左側と右側です)、180°反転し、マウスを遠ざけて元に戻します
<body> <div class="container" ontouchstart="this.classList.toggle('hover');"> <div class="box1"> <span>hello~</span> </div> <div class="box2"> <span>bye~</span> </div> </div> <div class="container" ontouchstart="this.classList.toggle('hover');"> <div class="box3"> <span>hello~</span> </div> <div class="box4"> <span>bye~</span> </div> </div> <div class="container" ontouchstart="this.classList.toggle('hover');"> <div class="box5"> <span>bye~</span> </div> <div class="box6"> <span>hello~</span> </div> </div></body>
4. 以下はスタイルです:
1. 遠近効果を持たせるために、遠近サブ要素ボックスがコンテナに追加されます
2.box2 と box4 は裏側にあるため、反転されます。最初に -180°、背面に反転してから反転したときに通常の視覚に準拠するようにします
3. 各ボックスに backface-visibility が追加されます: 回転した div 要素の背面を非表示にします
4.box5、box6 、回転中心点を変更しました
れー
とても簡単ですね、好きなように反転するだけです〜
5. 結論
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。