css3 3d 変換 css3 を使用して動的な 3d 立方体を作成する (html5 演習)_html5 チュートリアルスキル-H5 チュートリアル-php.cn

今日の講座では、css3を使って3D立方体を作成する方法を紹介します。以下のリンクから実際の効果を閲覧し、上下左右のキーを操作して立方体の反転効果を実現できます。
デモアドレス: http://www.jb51.net/jiaoben/70022.html
作り方から始めましょう。
html:

コードをコピーします

コードは次のとおりです:

上、下、左、右

ロレムイプサム

回転 3D キューブ

その他のコンテンツ
< /div>

上記の HTML では、クラスを使用して立方体の 6 つの面を表します。 1 から 6 までの名前がそれらを区別します。外側には cube と Experiment の ID を持つ 2 つのコンテナーが含まれています。どちらかのレイヤーがないと 3D 効果を生成できません。
実験はレンズの役割を果たします。内部要素に 3D 効果が表示されるように、そこにフォーカスを設定します。
perspective 属性は、z 軸平面の深さを定義し、平面の上下の要素の相対的なサイズも定義します。一般に、遠近値が小さいほどオブジェクトは大きくなり、遠近感値が大きいほどオブジェクトは小さくなり、遠ざかります。 http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html で効果を確認できます。
perspective-origin 属性は、パースペクティブの原点を定義します。

css

:

コードをコピー

コードは次のとおりです:

#experiment { -webkit-perspective: 800; -o-perspective: 800; -webkit -perspective-origin: 50% 200px;

-moz-perspective-origin: 50% 200px; >}

cube によって設定されるプロパティには固定の幅と高さが含まれ、位置は相対的に設定されます。立方体の要素が限られた領域内で 3D アニメーションを実行できるようにするには、固定の高さと幅が必要です。高さと幅を 100% に設定すると、立方体の要素がページ全体で移動します。
トランジションはアニメーション関連の属性を設定するために使用されます。 transform-style:preserve-3d; 立方体のすべての要素が全体として 3D 効果を生成します。
詳細については、http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ をご覧ください。
css:

コードをコピー

コードは次のとおりです:

#キューブ {
位置: 相対;
マージン: 100 ピクセル;

高さ: 400 ピクセル;

-webkit-transform 2s 線形; moz-transition : -moz-transform 2s 線形; -o-transform 2s 線形; transition: 2 秒線形を変換します。 🎜>-moz-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; >次へ CSSプロパティを立方体の6つの面に均一に設定します。

css

:

コードをコピー

コードは次のとおりです:

.face {
位置: 絶対;
幅: 360 ピクセル;
背景色: rgba(50, 50, 50) , 0.7) ;

}

次に、6 つの面の 3D 関連属性を設定し、rotateX またはrotateY を使用して立方体表面の方向を反転し、translateZ を使用して立方体表面を移動します。 3D空間。
css
:

コードをコピー

コードは次のとおりです:

#cube .one {
-webkit-transform: 回転X(90度) 変換Z(200ピクセル);
-moz-transform: 回転X(90度) 変換Z(200ピクセル);
-o-transform: 回転X(90度) 変換Z(200ピクセル);
変換: 回転X(90度) 変換Z(200ピクセル);
}
#cube .two {
-webkit-transform:translateZ(200px);
-moz-transform:translateZ(200px);
-o-transform:translateZ(200px);
変換:translateZ(200px);
}
#cube .three {
-webkit-transform: 回転 Y(90 度) 変換 Z(200 ピクセル);
-moz-transform: 回転 Y(90 度) 変換 Z(200 ピクセル);
-o-transform: 回転 Y(90 度) 変換 Z(200 ピクセル);
変換: 回転 Y(90 度) 変換 Z(200 ピクセル);
}
#cube .four {
-webkit-transform: 回転 Y(180 度) 変換 Z(200 ピクセル);
-moz-transform: 回転 Y(180 度) 変換 Z(200 ピクセル);
-o-transform: 回転 Y(180 度) 変換 Z(200 ピクセル);
変換: 回転 Y(180 度) 変換 Z(200 ピクセル);
}
#cube .five {
-webkit-transform: 回転 Y(-90 度) 変換 Z(200 ピクセル);
-moz-transform: 回転 Y(-90 度) 変換 Z(200 ピクセル);
-o-transform: 回転 Y(-90 度) 変換 Z(200 ピクセル);
変換: 回転 Y(-90 度) 変換 Z(200 ピクセル);
}
#cube .six {
-webkit-transform: 回転X(-90度) 変換Z(200ピクセル);
-moz-transform: 回転X(-90度) 変換Z(200ピクセル);
-o-transform: 回転X(-90度) 変換Z(200ピクセル);
変換: 回転X(-90度) 変換Z(200ピクセル);
}

最後に行われるのは、面でのキーダウンイベントであり、これは、上下左右にキーを押したときに、立方体の変換効果が実現されます。 >

复制代码代码如下:

var xAngle = 0, yAngle = 0;

document.addEventListener('keydown', function(e)
{
switch(e.keyCode)
{
case 37: // left
yAngle -= 90;
ブレーク;
ケース 38: // 上
xAngle = 90;
ケース 39: // 右
ブレーク; 40: // ダウン
xAngle -= 90;
$('cube').style.webkitTransform = "rotateX(" xAngle "deg) "度)";
}, false);

プロセスがここに到着し、次に大家がハンド練習を開始できます。