第24章CSS 3変形効果[下]

学習のポイント:
1.3 D変形の概要
2.transform-style
3.perspective
4.3 D変形属性
 
先生:李炎恢
 
本章では主にHTML 5におけるCSS 3の変形効果を検討し,主に前節の2 D平面変形から3 D立体変形に移行する.
 
1.3 D変形の概要
前に、要素の平行移動、回転、スケール、傾斜などの機能を学びました.これらの効果は単純な2次元平面図にすぎず,2 Dと呼ぶ.では、実際にはCSS 3も3次元立体的な機能効果を提供しており、現在は新しい主流ブラウザがサポートされているが、2 Dより遅れているだけで、ブラウザのバージョンに対する要求も高い.
3 Dは立体3次元であるため,x,y軸に基づいてz軸が1つ多く出て,軸を深く飛び出すのが一般的である.以下は、3 D変形のプロパティ値テーブルです.
属性値
説明
translate3d(x,y,z)
3 Dで要素を移動し、x、y、z軸を設定します.
translateZ(z)
要素のz軸を3 Dでパンする
scale3d(x,y,z)
3 D方式で1つの要素をスケーリング
scaleZ(z)
3 Dズーム要素のz軸を設定する
rotate3d(x,y,z,a)
3 d方式回転要素
rotateX(a)
3 D方式の回転要素のx、y、z軸をそれぞれ設定
rotateY(a)
rotateZ(a)
perspective(長さ値)
パース投影マトリクスの設定
matrix 3 d(複数値)
行列の定義
3 D変形は2 D変形よりも遅いので、古いバージョンのブラウザと互換性が必要な場合は、このテーブルと照合できます.具体的には以下の通りです.
 
Opera
Firefox
Chrome
Safari
IE
サポートには接頭辞が必要です
15 ~ 22
10 ~ 15
12 ~ 35
4 ~ 8
なし
接頭辞なしのサポート
23+
16+
26+
なし
10.0+
//互換バージョン完全形式

-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-o-transform: translateZ(200px);
-ms-transform: translateZ(200px);
transform: translateZ(200px);

 
二.transform-style
Transform-styleプロパティは、ネストされた要素が3 D空間でどのように現れるかを指定します.
属性値
説明
flat
既定値は、すべてのサブエレメントが2 D平面に表示されていることを示します.
preserve-3d
サブエレメントが3 D空間に現れることを示します.
//一般的に現在の要素の親に設定

transform-style: preserve-3d;

効果を見るには、後の機能プロパティと変形構成を組み合わせる必要があります.同様に、この属性にも様々なメーカーの接頭辞が必要です.
 
三.perspective
perspectiveは、3 D変形の重要なプロパティです.このプロパティは、表示者の位置を設定し、ビジュアルコンテンツをテーパにマッピングし、2 D平面に配置します.
属性値
説明
none 
既定値は、無限の角度で3 D物体を見ることを示していますが、平らに見えます.
長さの値
長さの単位が0より大きい値を受け入れます.その単位はパーセントではありません.値が大きいほど、角度が遠くなるのは、あなたの人が遠くから物体を見るのと同じです.値が小さいほど、正反対です.
//閲覧者の距離位置を設定し、一般的に要素の親要素に設定する

perspective: 1000px;

効果を見るには、後の機能プロパティと変形構成を組み合わせる必要があります.同様に、この属性にも様々なメーカーの接頭辞が必要です.
 
四.3 D変形属性
前の3 D機能属性transform-styleとperspectiveを用いて3 D変形効果を構築した.
1.translate3d(x,y,z)
//3 Dシフトが必要なHTML構造は、親要素が含まれている必要があります

<div id="a">
    <img src="img.png" alt="" />
</div>

//CSS部、親要素3 Dレンダリングとパース距離の設定

#a {
    perspective: 1000px;
    transform-style: preserve-3d;
}

img {
    /*z       */
    transform: translate3d(300px,100px,240px);
}

2.translateZ(z)
//z軸は単独で設定できますが、z軸は負の値で設定できます

img {
    transform: translateZ(240px);
}

3.scale3d(x,y,z)
//3 Dズーム、個別設定は無効、角度合わせが必要

img {
    transform: scale3d(1,1,1.5) rotateX(45deg);
}

4.scaleZ(z)
//z軸を個別に設定し、x軸とy軸はデフォルトで1

img {
    transform: scaleZ(1.5) rotateX(45deg);
}

5.rotate3d(x,y,z,a)
//3 D回転を設定し、aは角度を表し、xyzは0または1の間の数値

transform: rotate3d(1,0,0,45deg);

6.rotateX(a)、rotateY(a)、rotateZ(a)
//3 D回転単独設定

transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);

最後のmatrix 3 dはあまり言わないで、無視します.
 
CSS 3はまた、perspective-origin属性を提供し、3 D変形におけるソースポイント角度を設定する.このアトリビュートのデフォルト値は50%で、center centerです.
属性値
説明
パーセント
要素x軸またはy軸の始点を指定します.
長さの値
距離の指定
left
x軸の位置指定
center
right
top
y軸の位置指定
center
bottom
//ソースを右上に変形

perspective-origin: top right;

CSS 3はまた、エレメントにピボットを設定する値perspective(長さ値)を提供するが、親エレメントの設定とは異なる.親要素全体がパースとして機能し、要素自体がパースとして機能するため、異なります.
//透視距離の具体的なテスト

img {
    transform: perspective(1000px) rotateY(45deg);
}