CSS3 3Dキューブ映像の特殊効果コードを回転

まず、CSS3 3D回転は何ですか？

3D空間を形成する：変換、スタイル：保存-3D（3D親要素を形成するように、要素は、サブ3D空間で変化させました）。

z軸、Z軸に対して複数3dのアウトプロセスの画面に垂直な3Dシーン、：画面に方向近いは前方に、離れて画面からの逆方向、水平方向および垂直方向のXの交線で画面上の2Dシーン軸とy軸。

3D回転CSS使用の相関特性及びメソッドの第二、

変形特性：変換

---- 3D 3D変位性能関数：変換：translate3d（X、Y、Z）; 3Dスケーリング：変換：scale3d（X、Y、Z）。

移動X（）scaleXと（）

移動Y（）scaleYの（）

translateZ（）scaleZ（）

3D回転： ransform：回転（）;

回転X（） - xは0と1の間の数であり、回転軸X周りのベクトル値の主な要素を記述します。

回転Y（） - Yは：Y軸周りベクトル値の主な要素を記述するために、0と1の間の数です。

回転Z（）//と同様デフォルト効果 - zは0と1の間の数であり、Z軸周りのベクトル値の主な要素を記述します。

ROTATE3D（）

ROTATE3D（X、Y、Z）[0は回転しません。】回転 - ：角の値であるが、主にその値が要素の反時計回りの回転に対し、素子の正、時計回りの回転である場合には、3D空間における要素の回転角度を指定するために使用されます。

注：塗りつぶし三つの値、すなわちtranslate3d、3Dを追加する必要がある場合、属性値を変換し、ROTATE3D、scale3d

三、CSS3 3Dキューブ回転画像特殊効果コード

分析思考：ボックス6内の表面を設定、ボックスの内側に配置された6面、それぞれ、6つの異なる方向に6つの面は、立方体を形成します。

<！DOCTYPE HTML>

<ヘッド>

<メタ文字セット= "UTF-8">

<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>

<タイトル>ドキュメント</ TITLE>

<スタイル>

* {

マージン：0;

パディング：0;

}

。ボックス{

幅：300ピクセル;

高さ：300ピクセル;

位置：固定;

左：0;右：0;

トップ：0;下：0;

マージン：自動;

トランスフォームスタイル：保存-3D; //空間3dが形成されています）

変換：回転X（20deg）回転Y（30度）; //ステージの3D回転角度を見ることが困難になります

トランジション：2S; //過度なルックスに、より快適に

}

■はdivの{

幅：300ピクセル;

高さ：300ピクセル;

テキスト整列：センター;

行の高さ：300ピクセル;

フォントサイズ：100ピクセル;

フォント重量：大胆;

色：#FFF;

位置：絶対; //親要素の内側に配置すべての6つの面を作ります

左：0;トップ：0;

不透明度：0.5; //透明の特性

ボーダー：2ピクセル固体＃000;

背面-可視性：隠された; //バックが表示されていない、自分の利便性を見てみると、提供されない場合があります

}

.con1 {

/ *前方の第一面* /

背景：赤;

変換：translateZ（150ピクセル）。

}

.con2 {

/ *第二の平面が後方に行きます* /

背景：青;

変換：translateZ（-150px）回転Y（原稿180°）; / *回転Y（原稿180°）のフロントは* /外向きになるように

}

.con3 {

/ *まず、次いで上方への変位150ピクセル回転90deg X軸周り* /

背景：ピンク;

変換：移動Y（-150px）回転X（90deg）。

}

.con4 {

/ *最初の下方への変位150ピクセル、X軸回り、次に回転90deg / *

背景：緑;

変換：移動Y（150ピクセル）回転X（-90deg）。

}

.con5 {

/ *まず変位150ピクセルを残し、次にYの周りを回転90degは*軸線/

背景：rosybrown。

変換：移動X（-150px）回転Y（-90deg）。

}

.con6 {

/ *最初王Youce変位150ピクセルは、Y約次いで回転90degは* /軸線

背景：＃000;

変換：移動X（150ピクセル）回転Y（90deg）。

}

</スタイル>

</ head>の

<身体>

<のdivクラス= "箱">

</ div>

</ BODY>

</ HTML>

CSS3 3Dキューブ映像の特殊効果コードを回転

おすすめ