CSS3-3D flick_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS3-3D flick_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:27:54

オリジナル

1776 人が閲覧しました

このケースでは主に css3 と html5 を使用します。js を使用せずにアニメーションを実行することもできます◕.◕

1. まず、必要な主なスタイルを見てみましょう:

perspective

transform

transition

ポジション

クラスリスト

以上です、レベルが限られているので詳しくは言いません！ 2秒、効果を見てください：デモンストレーションエフェクト、Runjs

3つの効果のデフォルトスタイルは上に示すように、とても乱雑に見えます、デモを見てみましょう画像を表示 == デモ効果、runjs

3. HTML 構造は次のとおりです:

3 つのコンテナーと 6 つのボックス、マウスが通過すると:

1.box1 は X 軸を中心に回転します (変換) -origin のデフォルトコンテナの中心)、180°反転背面のボックス 2 に移動し、マウスを遠ざけて元に戻します

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. 結論