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

今日の講座では、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);


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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

1 か月前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

1 か月前 By DDD

R.E.P.O.最高のグラフィック設定

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

1週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7392

15

Java チュートリアル

1630

14

CakePHP チュートリアル

1357

52

Laravel チュートリアル

1268

25

PHP チュートリアル

1216

29

もっと見る