IT・ブラザーズHTML5 CSS3プロパティのチュートリアル特殊効果、3D変換のバンド3

5f16a58a57bc47108e1c532aebeafd05.jpg

 

5 3D回転

三次元の変形において、我々は、任意の軸で回転要素を作ることができます。回転X()、回転Y()および回転Z():この目的のために、CSS3は、3つの回転機能を追加しました。使用回転X()関数は、軸Xを中心に回転するように要素を可能にし、回転Y使用()関数は、Y軸を中心に回転するように要素を可能にし、回転Zの使用()関数は、Z軸の周りを回転するように素子を可能にします。

値は、軸X約素子の正、時計回りの回転である場合;値が負であれば逆に、Xの周りに反時計回りの要素を、軸回転X()関数の要素は、指定された回転角の量として定義され、X軸周りの回転を指定します回転。次のように基本的な構文は次のとおりです。

 回転X(A)

ここで、回転角度値が正または負であり得る値を指します。

値は、軸Y約素子の正、時計回りの回転である場合;値が負であれば逆に、Y反時計回りの要素を、軸回転Y()関数は、指定された回転角の量として定義され、Yの周りの回転の要素が軸線を指定します回転。次のように基本的な構文は次のとおりです。

回転Y(A)

ここで、回転角度値が正または負であり得る値を指します。

回転Z()関数と同じ2つの機能の他の機能、回転Z()関数は、Z軸を中心に回転要素を指定することを除いて。次のように基本的な構文は次のとおりです。

回転Z(A)

回転Z()関数は、要素が時計回りに回転または反時計回りになるように、ビュー、回転Z()関数の場合にのみ視点をZ軸の周りの要素を指定され、効果、及び回転()同様の効果が、それは回転の2次元平面内にはありません。

簡単な例を示す図で、より深い回転の理解()関数を用いて、次の通り:

画像/ 20191127 / 8d2fd1e129f576e17366cb6cf0255ba5.png

 

ここでは、Y軸周りの第2の画像の回転、およびZ軸周りの第三の画像回転30度を30度、X軸30度、約最初の画像の回転をさせます。ブラウザで見て、作用効果は、図5に示します。

画像/ 20191127 / b42034699a7f7fba781fbeedb73ffe78.jpeg

図5回転()3D回転

 

6 3Dズーム

CSS3 3D変形スケーリングscaleZメイン()と二種類のScale3D()関数、X軸及びY軸Scale3D()は、同時に効果scaleZに相当する1、即ちscale3d(1,1、SZ)、(ある場合SZ)。3Dスケーリング機能を用いて、スケーリング要素Z軸。デフォルト値は、値、要素を増幅する、1より大きいである場合、1であり、そうでない場合は0.01よりも大きく1よりも、狭い要素。次の構文を使用します。

scale3d(SX、SZ)

プロパティ値とスケールは、表5に記載さ:

表5スケール()と属性値の値説明

 

画像/ 20191127 / 2c253444f1c1a995daa52f310e2a187a.png

    

横方向および垂直方向のスケーリング要素の可能な2Dスケーリング関数のスケール(SX、SY)。Z軸の3次元マルチスケール変換。scaleZ()関数で次の構文を使用して、Z軸スケーリング要素で実装。

scaleZ(S)

SはZ軸点における各要素の割合を指定しました。簡単な例、scaleZのより深い理解()関数の観点では、次の通り:

画像/ 20191127 / 9f35a6310ba13a57be7ff053fab13779.png

 

ここでは、Y軸周りに第二の画像の回転を30度、Y軸の30度についての最初の画像の回転を聞かせて三倍に拡大しました。図6に示すように、ブラウザでの作用効果を見ました。

画像/ 20191127 / 30aab34d962aaa36811d0c0ba4d53fd8.jpeg

図6 scaleZ()3Dスケーリング

 

7 3Dボックス

本明細書で使用する場合、3D変換のプロパティとメソッドは、ボックスの3D表面6を構築するために、ボックスが立方体です。コードは以下の通りであります:

 

この構築物の3Dボックスは、フロントは3です。ボックスへときにマウスが移動し、X軸周りのボックス360deg回転ので、読者は明らかボックスを回転させる工程を見ることができるようにするために、我々はボックスの遷移を追加しました。以下に、図7に示すスクリーンショットのランダムな回転です。

image/20191127/4b2d87244ae8bb9c079977b72f50b4b0.jpeg

図7 3Dボックス

おすすめ

転載: www.cnblogs.com/itxdl/p/11974595.html