CSS3 での 2D および 3D 変換の実装

CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使用される可能性があり、3D 効果もケーキの上のアイシングになります。

軸について

座標軸については中学校の幾何学で学び始めました。最も基本的なものは平面直交座標系XoYで、その後空間直交座標系XYZ拡張されました。ここで CSS の座標系について説明しましょう。

CSS やデバイス関連の開発では、基本的に次の座標系に従います。携帯電話の画面を例にとると、座標系のドットは画面の左上隅にあります。x軸は水平で、右方向が正方向です。y軸は垂直で、下方向が正方向です。z軸は画面の平面全体に垂直で、外方向が正方向で、画面の光が目に向かう方向です。

図に示すように:

2D変換

移動translate() 、回転rotate() 、スケーリングscale() 、 skew() 、行列matrix()を含みます。

平行移動(x,y)

変換操作にはtranslateX(x)とtranslateY(y)が含まれます。変換パラメータ値は括弧内に入力され、負の値、つまり反対方向になることもあります。

例えば：

div {
    /*要素は右に 50px、下に 60px 移動します*/
    変換: translateX(50px);
    変換: translateY(60px);
}
/* 省略形、効果は同じ */
div {
    変換: translate(50px, 60px);
}

translate()が 1 つの値のみを指定する場合、デフォルトはx 軸の変位、つまり水平方向の移動になることに注意してください。

回転(度)

要素が回転します。括弧内のパラメータは回転角度です。時計回りは正の値、反時計回りは負の値です。単位はdeg 、つまり度数です。

例えば：

div {
    /* 時計回りに30°回転 */
    変換: 回転(30度);
} 

スケール(x,y)

スケーリング要素の場合、パラメータは、 scaleX(x)およびscaleY(y)を含む x 軸および y 軸のスケーリング係数です。 1 つのパラメータを指定すると、比例してスケーリングされます。

例えば：

div {
    /* 水平方向に半分に縮小し、垂直方向に 2 倍に拡大します */
    変換: スケール(.5, 2);
} 

div {
    /* 3倍に拡大*/
    変換: スケール(3);
} 

skew(xdeg,ydeg)

水平方向と垂直方向の傾斜角度を表すskewX(deg)とskewY(deg)が含まれます。

例えば：

div {
    変換: skewX(30deg);
    変換: skewY(45度);
}
/* 略語 */
div {
    変換: skew(30deg, 45deg);
}

要素が長方形の場合、 skewX(30deg)長方形の上端が固定され、下端が右に30deg傾いていることを意味します。skewY skewY(30deg)長方形の左端が固定され、右端が下方向に30deg傾いていることを意味します。

上で説明した画面座標系に基づいて覚えることができます。x 軸は画面の上部にあり、右を指しています。y 軸は画面の左側にあり、下を指しています。

skew()が 1 つの値のみを指定する場合、デフォルトは水平傾斜です。

skewX(30deg)の効果:

skewY(30deg)の効果:

行列(a,b,c,d,e)

これは包括的なプロパティです。これまでの平行移動、拡大縮小、回転、傾斜はすべてこの行列関数によって実現できます。そう、大学の線形代数における行列 T_T です。

実は、この関数は前の 4 つの操作の原理に基づいています。この関数には 6 つのパラメータがあり、4 つの操作はパラメータを変更するさまざまな方法に対応しています。数学を専攻していない人のために、原理の詳細については説明しません。前の操作は基本的に十分です (興奮を見つけたい場合は、Baidu の「css マトリックス」にアクセスしてください)~~;

3D変換

いわゆる 3D とは、以前の 2D 平面にZ 軸を追加することです。方法の名前は似ていますが、3 つの軸を使用して変換することで、3 次元効果を実現できます。

すべての 3D ハウツーをご覧ください:

3D座標を平行移動(x,y,z)

空間座標系と上記の x 軸、 y 軸、 z 軸の位置を組み合わせると、 3 つのパラメータは 3 つの座標軸方向の要素の移動値に対応し、 translateX(x) 、 translateY(y) 、 translateZ(z) 3 つのメソッドも含まれます。

例：

div {
    変換: translateX(50px);
    変換: translateY(60px);
    変換: translateZ(70px);
}
/* 略語 */
div {
    変換: translate3d(50px, 60px, 70px);
}

注: translateZ(z)設定の効果が見られない問題については、後ほどpersoective設定について説明するときに説明します。

3D回転(x,y,z,度)

パラメータx, y, z空間座標系における座標位置であり、原点(0, 0, 0)からこの点までの方向を持つ新しい軸が形成されます。これは数学ではベクトルと呼ばれます。最後のパラメータは、形成された新しい軸を中心とした要素の回転角度です。

これにはrotateX(deg) 、 rotateY(deg) 、 rotateZ(deg)も含まれます。前の 2D rotate()は、ここではrotateZ()です。

回転方向については、物理学の左手の法則に似た判定方法を採用しています。角度を正に指定すると、左手の親指が 4 本の指に対して垂直になり、親指は要素が回転する座標軸またはカスタム軸を指し、4 本の指が曲がる方向が回転方向になります。

例：

div {
    変換: rotateX(30deg);
    変換: rotateY(30deg);
    変換: rotataZ(30deg);
}
/* カスタム軸回転 */
div {
    変換: rotate3d(10, 10, 10, 30deg);
}

rotateX(30deg)の効果:

rotateY(30deg)の効果:

ここで回転が期待どおりに行かず縮小する理由については、主に視点が設定されていないことが原因ですが、これについては後で説明します。

スケール3d(x,y,z)

scaleX(x) 、 scaleY(y) 、 scaleZ(z)を含む 3 つの軸に関する要素のスケーリング比率。例:

div {
    変換: scaleX(2);
    変換: scaleY(2);
    変換: scaleZ(2);
}
/* 略語 */
div {
    変換: scale3d(2, 2, 2);
}

ここで、 scaleZ()が使用されていることに注意してください。通常、z 軸を拡大するとオブジェクトが太くなりますが、CSS で表現される平面要素には厚みがないため、ここで z 軸を拡大縮小すると、実際には要素の z 軸上の座標が拡大縮小されます。したがって、目的の効果を得るにはtranslateZ()の値を指定する必要があります。

例：

体 {
    視点：500;
}
div {
    /* この順序に従う必要があります。最初にズームしてから移動します。そうしないと効果がありません。*/
    変換: scaleZ(2) translateZ(100px);
} 

上記のスタイルに従うことによってのみ、 scaleZ(2)の効果を確認できます。要素は Z 軸上で100px移動し、スケール比は 2 なので、最終的には200px移動するためです。画面上では、要素が拡大されて表示されます。これが遠近法効果であり、これは以下で説明するperspective値です。

マトリックス3D()

先ほどの2D matrix()と似ていますが、括弧内に16個のパラメータがあり、行列がより複雑になっています。 飛ばしましょう﹋o﹋。 興味があれば、Baiduで検索してみてください~~;

視点

上記の例では、Z軸の移動と拡大縮小は通常、目に見える効果はありません。これは、パースペクティブと呼ばれるこの属性値が不足しているためです。この用語はアートやデザインで使用され、オブジェクトが近くにあるときは大きく、離れているときは小さくなる効果を実現します。離れるほど小さくなり、最終的にはパースペクティブポイントであるポイントまで小さくなります。 perspective 、そのポイントが要素からどのくらい離れているかを設定するために使用されます。通常、300〜600は良好なパースペクティブ効果を反映します。値が小さいほど、要素のパースペクティブ変形が深刻になります。

効果を確認するには、パースペクティブ効果を適用する要素の親要素のスタイルでこのプロパティを設定する必要があることに注意してください。次に例を示します。

体 {
    視点：500;
    /* ブラウザの互換性を考慮する*/
    -webkit-perspective: 500;
}

次の形式で要素自体に設定することもできます。

div {
    変換: 視点(500);
    -webkit-transform: パースペクティブ(500);
}

rotateX(45deg) のよりリアルな効果:

rotateY(45deg)の効果:

視点の起源

この項目は、視点の位置を設定します。デフォルトでは、要素の幾何学的中心にあります。設定する必要がある場合、形式は次のようになります。

体 {
    /* デフォルトの中心 */
    視点の原点: 中心 中心;
    /* 左上隅 */
    視点の原点: 左上;
    /* 右中央 */
    視点の原点: 右中央;
    /* 下中央 */
    視点の原点: 中央下;
    /* 長さも指定可能*/
    パースペクティブ原点: 30px 40px;
    /*最後に、-webkit- 互換性を追加することを忘れないでください*/
}

視点原点の効果: 左中央:

perspective-origin: right center の効果:

背面の可視性

翻訳すると、裏面が見えるかどうかを意味します。 visibleとhiddenを設定できます。デフォルトでは表示されます。たとえば、要素の前面にテキストがあり、裏面が表示するように設定されている場合、要素内のテキストは y 軸を中心に 180 度回転した後に鏡像になり、それ以外の場合は表示されません。

backface-visibility: visible の効果:

backface-visibility: hidden の効果 (回転は発生しますが、裏面は見えないため、見えません):

その他のプロパティ

変換元

2D/3D 変更のベンチマークを設定します。長さの値、またはleft, right, top, bottomを指定できます。例:

div {
    /* 要素の左上隅を軸に回転します */
    変換の原点: 左上;
    変換: 回転(30度);
} 

変換スタイル

要素が 3D 空間でネストされた要素をどのように表示するかを設定します。オプションはflatとpreserve-3dです。デフォルトはflatです。

ここでは、次のように理解できます。以前は、要素を変換するときに、画面が配置されている平面の座標系に基づいて変換していました。ただし、要素に子要素がある場合は、 transform-styleを使用して、どの座標系で変換するかを決定します。flat flat 、画面座標系が引き続き基準として使用されることを意味し、 preserve-3d 、変換された親要素が配置されている平面の座標系が基準として使用されることを意味します。

＃親 {
    変換スタイル: 3D を保持します。
    -webkit-transform-style: 3d を保存します。
    変換: perspective(500) rotateY(45deg);
    -webkit-transform: perspective(500) rotateY(45deg);
}
＃子供 {
    変換: perspective(500) rotateX(45deg);
    -webkit-transform: perspective(500) rotateX(45deg);
}

フラットの効果:

preserve-3dの効果:

たとえば、親要素が x 軸を中心に 45 度回転し、 transform-style: preserve-3dが設定されていて、ネストされた子要素が y 軸を中心に 45 度のみ回転する場合、最終的な効果は、子要素が親要素平面の y 軸を中心に 45 度回転することになり、最初に x 軸を 45 度回転させ、次に y 軸を 45 度回転させた効果のように見えます。

最後に、上記のすべての機能にブラウザ互換のプレフィックスを追加することを忘れないでください。

ちなみに、上記の機能を組み合わせた効果を示すデモページはこちらです。以下をクリックしてください: CSS 3D

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。