CSS3はCSS3を使用して3D変換して動的な3Dキューブ（HTML5プラクティス）を作成します

今日のコースでは、CSS3を使用して3Dキューブを作成する方法を紹介します。以下のリンクを介して実際の効果を閲覧し、左下のキーを操作して、キューブのフリップ効果を実現できます。

それを作る方法から始めましょう。

<div id = "実験">

<div id = "cube">

<div>

一顔

</div>

<div>

上、下、左、右

</div>

<div>

Lorem Ipsum。

</div>

<div>

新しい形式のナビゲーションは楽しいです。

</div>

<div>

3Dキューブの回転

</div>

<div>

より多くのコンテンツ

</div>

</div>

</div>

上記のHTMLでは、顔としてクラスを持つ6 Divがキューブの6つの顔を表しており、1から6のクラス名を使用して区別されます。外部容器には、IDキューブと実験を備えた2層のコンテナが含まれています。両方のレイヤーが必要です。 1人がいなければ、3D効果を生成することはできません。

その中で、実験はレンズの役割を果たします。 3D効果を内部要素に表示できるように、焦点距離を設定します。

視点属性は、Z軸平面の深さを定義し、平面の上下の要素の相対寸法も定義します。一般に、視点値が小さいほど、オブジェクトが大きくなるほど、あなたに近づきます。視点値が大きいほど、オブジェクトが小さくなるほど、あなたから遠く離れています。 http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.htmlから効果を表示できます。

視点オリジンプロパティは、視点の起源を定義します。

＃実験 {

-webkit-perspect：800;

-moz-perspect：800;

-o-perspect：800;

視点：800;

-webkit-perspect-origin：50％200px;

-moz-perspect-origin：50％200px;

-o-perspect-origin：50％200px;

パースペクティブオリジン：50％200px;

}

キューブによって設定されたプロパティには、固定幅と高さが含まれており、相対位置を設定します。キューブ内の要素が定義された領域内で3Dアニメーションを実行できるように、固定された高さと幅が必要です。高さと幅を100％に設定すると、キューブ内の要素がページの範囲全体に移動します。

トランジションは、アニメーション関連のプロパティを設定するために使用されます。変換スタイル：preserve-3d;キューブ内のすべての要素が全体として3D効果を生成します。

詳細については、http：//www.zhangxinxu.com/wordpress/2012/css3/"> css3-3d-transform-pesspective-anime-transition/を参照できます。

CSS：

#cube {

位置：相対;

マージン：100px Auto;

高さ：400px;

幅：400px;

-webkit-transition：-webkit-transform 2s linear;

-moz-transition：-moz-transform 2s linear;

-o-transition：-o-transform 2s線形;

遷移：2Sリニアを変換します。

-webkit-transform-style：preserve-3d;

-moz-transform-style：preserve-3d;

-o-transform-style：preserve-3d;

変換スタイル：preserve-3d;

}

次に、キューブの6つの面のCSS属性を設定します。

。顔 {

位置：絶対;

高さ：360px;

幅：360px;

パディング：20px;

背景色：RGBA（50、50、50、0.7）;

}

次に、6つの面の3D関連特性を設定し、RotatexまたはRotateyを使用してキューブ表面の裏返しを実現し、Translatezを使用して3次元空間でキューブ表面の動きを実現します。

#cube .one {

-webkit-transform：rotatex（90deg）translatez（200px）;

-moz-transform：rotatex（90deg）translatez（200px）;

-o-transform：rotatex（90deg）translatez（200px）;

変換：rotatex（90deg）translatez（200px）;

}

#cube .two {

-webkit-transform：translatez（200px）;

-moz-transform：translatez（200px）;

-o-transform：translatez（200px）;

変換：Translatez（200px）;

}

#cube .three {

-webkit-transform：rotatey（90deg）translatez（200px）;

-moz-transform：rotatey（90deg）translatez（200px）;

-o-transform：rotatey（90deg）translatez（200px）;

変換：Rotatey（90deg）translatez（200px）;

}

#cube .four {

-webkit-transform：rotatey（180deg）translatez（200px）;

-moz-transform：rotatey（180deg）translatez（200px）;

-o-transform：rotatey（180deg）translatez（200px）;

変換：Rotatey（180deg）translatez（200px）;

}

#cube .five {

-webkit-transform：rotatey（-90deg）translatez（200px）;

-moz-transform：rotatey（-90deg）translatez（200px）;

-o-transform：rotatey（-90deg）translatez（200px）;

変換：rotatey（-90deg）translatez（200px）;

}

#cube .six {

-webkit-transform：rotatex（-90deg）translatez（200px）;

-moz-transform：rotatex（-90deg）translatez（200px）;

-o-transform：rotatex（-90deg）translatez（200px）;

変換：rotatex（-90deg）translatez（200px）;

}

最後にすべきことは、キーダウンイベントをページにバインドすることです。これにより、アップ、ダウン、左、および右キーを押すと、キューブフリップモーション効果が達成されます。

JavaScript：

var xanger = 0、yangle = 0;

document.addeventlistener（ 'keydown'、function（e）

{

スイッチ（E.Keycode）

{

ケース37：//左

Yangle- = 90;

壊す;

ケース38：// up

xangle += 90;

壊す;

ケース39：//右

yangle += 90;

壊す;

ケース40：//ダウン

XANGHRE- = 90;

壊す;

};

$（ 'cube'）。style.webkittransform = "rotatex（"+xanger+"deg）rotatey（"+yangle+"deg）;

}、 間違い）;

コースはすべてです。次に試してみることができます。