CSSで2D変換関数を使用する方法

ティファニーの新しい本「CSSマスター、第2版」からの抜粋

CSS変換機能により、他の方法では達成できない効果と相互作用を作成する能力が得られます。トランジションとアニメーションを組み合わせて、回転、踊り、拡大する要素とインターフェイスを作成できます。特に3次元変換により、物理的なオブジェクトをシミュレートできます。この記事では、2次元変換関数について説明します（ここでは3次元関数が紹介されています）。

主に、回転、スケーリング、傾斜、変位の4種類の2次元変換関数があります。他の6つの機能により、単一の次元に沿って変換できます。

キーポイント

• CSSの4つの主要な2次元変換関数は、回転、スケール、スキュー、および翻訳です。これらの機能により、回転、踊り、拡張する要素やインターフェイスなど、他の方法では達成できない効果や相互作用を作成できます。
• rotate（）関数は、変換オリジンの周りに指定された角度で要素を回転させます。時計回りまたは反時計回りに回転することができます。スケール関数は、Xディメンション、Yディメンション、またはその両方の要素のサイズを増加または減少させることができます。翻訳関数は、要素の描画位置と指定された距離によるレイアウト位置の間の距離です。
• 変換関数を組み合わせて、より複雑な変換を作成できます。ただし、これらの関数が適用される順序は、結果を大幅に変更するため重要です。これは、ブラウザが新しいマトリックスを作成して各関数のマトリックスを乗算するためです。
• CSS変換仕様の最新バージョンは、CSSに翻訳、回転、および拡張属性を追加します。これらのプロパティは、対応する変換関数と非常に同様に機能しますが、値はコンマ分離ではなく空間分離されています。これにより、回転、翻訳、またはスケーリング変換を他の変換から個別に管理できます。ただし、これらのプロパティのブラウザのサポートはまだ制限されています。

rotate（）

回転変形指定された角度で変換オリジンの周りの要素を回転させます。 Rotate（）を使用して、要素を時計回り（正角値）または反時計回り（負の角度値）を傾ける。その効果は、以下に示すように、風車や風車によく似ています。

rotate（）関数は、角度単位の値を受け入れます。角度単位は、CSS値とユニットモジュールレベル3で定義されます。これらは、deg（degre）、rad（radian）、grad（勾配）、またはターンユニットです。完全な回転は、360DEG、6.28RAD、400グラデーション、または1ターンに等しい。

アニメーションまたは遷移しない限り、1回の回転を超える回転値（540DEGまたは1.5ターンなど）は、残りの値に基づいてレンダリングされます。言い換えれば、540 degのレンダリング効果は180 deg（540度マイナス360度）のレンダリング効果と同じであり、1.5ターンのレンダリング効果は.5ターン（1.5 - 1）のレンダリング効果と同じです。ただし、0DEGから540DEGから1ターンから1.5回転までの遷移またはアニメーションは、要素を1.5回回転させます。

2次元スケーリング関数：スケール、スケーレックス、スケール

スケーリング関数を使用すると、xディメンション（scalex）、y dimension（scaley）、またはその両方の要素のレンダリングサイズを増やすか減少させることができます。スケーリングは次の図に示されています。ここでは、境界線はボックスの元の境界を表し、数値はその中心点を示します。

各スケーリング関数は、パラメーターとして乗数または因子を受け入れます。この乗数は、ほぼすべての正または負の数になります。パーセンテージ値はサポートされていません。 1を超える正の乗数は、要素のサイズを増加させます。たとえば、スケール（1.5）は、x方向とy方向の要素のサイズを1.5倍増加させます。 0〜1の間の正の乗数は、要素のサイズを縮小します。 0未満の値は、要素のサイズをスケーリングまたは減少させ、反射（フリップ）変換を作成します。

警告：スケール（0）を使用すると、数値にゼロを掛けた結果がゼロになるため、要素が消えます。

スケール（1）を使用してアイデンティティ変換を作成します。つまり、スケーリング変換が適用されていないかのように画面に描画されます。スケール（-1）を使用しても、要素の抽選サイズは変更されませんが、負の値は要素を反映します。要素が変換を表示しなくても、新しいスタッキングコンテキストをトリガーし、ブロックを含みます。

スケール関数を使用して、それぞれxおよびyの寸法をスケーリングできます。スケール（1.5、2）の2つのパラメーターを渡すだけです。最初のパラメーターはxディメンションをスケーリングします。たとえば、スケール（-1、1）を使用して、X軸に沿って個別にオブジェクトを反映できます。単一のパラメーターを渡すと、同じ要因によって2つの次元がスケーリングされます。

2次元翻訳関数：translatex、translatey、翻訳

翻訳要素は、指定された距離による描画位置とレイアウト位置の間の距離を相殺します。他の変換と同様に、翻訳要素はオフセットレフトまたはオフセットの位置を変更しません。ただし、画面上の視覚位置に影響します。

各2次元翻訳関数（translatex、translatey、およびtranslate）は、長さまたはパーセンテージをパラメーターとして受け入れます。長さユニットには、ピクセル（PX）、EM、REM、およびビューポートユニット（VWおよびVH）が含まれます。

transtex関数は、要素の水平レンダリング位置を変化させます。要素が左から0ピクセルの場合、Transform：TransmitionX（50px）は、レンダリング位置50ピクセルを開始位置の右に移動します。同様に、翻訳は要素の垂直レンダリング位置を変更します。 Transitiony（50px）は、要素を垂直に50ピクセルでシフトします。

翻訳する単一のパラメーターを渡すことは、yranslatexの使用と同等です。翻訳（）を使用することは、より簡潔な選択です。翻訳（100px、200px）の適用は、translatex（100px）translatey（200px）に相当します。

正の変換値は、要素を右（translatexの場合）または下（translateyの場合）に移動します。負の値は、要素を左（translatex）またはup（translatey）に移動します。

パンニングは、アイテムを左、右、上、または下に移動するのに特に役立ちます。左、右、上部、および下の属性の値を更新すると、ブラウザはドキュメント全体のレイアウト情報を再計算するようになります。ただし、レイアウトが計算された後、変換は計算されます。それらは、画面上の要素のディスプレイの位置に影響しますが、実際のサイズではありません。はい、ドキュメントのレイアウトとレンダリングを個別の概念と考えるのは奇妙ですが、ブラウザの観点からは、それらは実際に別々です。 変換プロパティは、近くのブラウザに表示される場合があります

CSS変換仕様の最新バージョンは、翻訳、回転、および拡張属性をCSSに追加します。変換プロパティは、対応する変換関数と非常に同様に機能しますが、値はコンマ分離ではなく空間分離されています。たとえば、変換を表現できます：rotate3d（1、1、1、45deg）：回転：1 1 1 45deg。同様に、翻訳：15％10％300pxは視覚的に変換と同じです：translate3d（15％、10％、300px）、およびスケール：1.5 1.5 3は変換と同じです：scale3d（1.5、1.5、3）。これらのプロパティを使用して、他のプロパティではなく、個別に回転、翻訳、またはスケーリング変換を管理できます。

執筆時点では、変換プロパティのブラウザサポートはまだ非常にまばらです。 ChromeとSamsungのインターネットは、箱から出してサポートしています。 Firefox 60以降では、サポートがフラグの後ろに隠されています。 スキュー、スキュー、スキューイ

傾斜変換により、ポイント間の角度と距離が同じ平面上に置かれます。傾斜変換は

せん断変換

とも呼ばれ、以下に示すように要素の形状を歪めます。

チルト関数（Skew、Skewx、およびSkewy）は、ほとんどの角度単位をパラメーターとして受け入れます。程度、勾配、およびラジアンは、傾斜関数の有効な角度単位であり、ターンユニット（おそらく明らかに）はそうではありません。

Skewx関数は、x方向または水平方向に要素をカットします（下の図を参照）。角度単位でなければならないパラメーターを受け入れます。正の値は要素を左に移動し、負の値は要素を右に移動します。

同様に、ゆっくりはy方向または垂直方向に要素をカットします。次の図は、変換の効果を示しています：Skewy（30Deg）。原点の右側のポイントは、正の値が増加すると下方に移動します。負の値はこれらのポイントを上向きに移動します。

これはスキュー関数につながります。スキュー関数には1つのパラメーターが必要ですが、最大2つのパラメーターを受け入れることができます。最初のパラメーターはx方向の要素を傾け、2番目のパラメーターはy方向の要素を傾けます。 1つのパラメーターのみが提供されている場合、2番目の値はゼロであると想定されており、X方向のみの傾斜と同等になります。言い換えれば、Skew（45Deg）のレンダリング効果はSkewx（45Deg）と同じです。

電流変換マトリックス

これまでのところ、変換関数について個別に説明しましたが、それらを組み合わせることもできます。オブジェクトをスケーリングして回転させたいですか？問題ありません：変換リストを使用します。たとえば、

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

これにより、以下に示す結果が生成されます。

変換関数を使用する場合、

シーケンスが重要です。これはイラストで最もよく示されているので、例を見てみましょう。次のCSSは要素を傾けて回転させます：

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

以下に示すように結果が得られます。

最初に要素を回転させてから傾けるとどうなりますか？

<code>.transformEl {
    transform:  rotate(45deg) skew(10deg, 15deg);
}</code>

効果（以下に示すように）は非常に異なります。

各変換には、変換関数の順に作成された異なる電流変換マトリックスがあります。理由を完全に理解するには、いくつかのマトリックスの乗算を学ぶ必要があります。これは、MatrixおよびMatrix3D機能を理解するのにも役立ちます。

マトリックスの乗算とマトリックス関数

マトリックスは、長方形の行と列に配置された数字または式の配列です。以下に示すように、4×4マトリックスを使用してすべての変換を表すことができます。

このマトリックスは、4×4マトリックスの値に対応する各パラメーターを受け入れるMatrix3D関数に対応します。以下に示すように、3×3マトリックスを使用して2次元変換を表すこともできます。

この3×3マトリックスは、マトリックス変換関数に対応しています。 Matrix（）関数は、それぞれが値aから fに対応する6つのパラメーターを受け入れます。

各変換関数は、マトリックスとマトリックスまたはマトリックス3D関数を使用して説明できます。以下の図は、scale3D関数の4×4マトリックスを示しています。ここで、sx、sy、szはx、y、zのスケーリング係数です。それぞれ寸法。

変換（たとえば、変換：スケール（2）翻訳（30px、50px））を組み合わせると、ブラウザは新しいマトリックスを作成して各関数のマトリックスを乗算します。この新しいマトリックスは、要素に適用されるマトリックスです。

しかし、マトリックスの乗算は次のようなものです。それは交換可能ではありません。単純な値の場合、3×2の積は2×3の積と同じです。ただし、マトリックスの場合、a ×bの積は、必ずしもb×aの積と同じではありません。例を見てみましょう。変換のマトリックス積：スケール（2）翻訳（30px、50px）を計算します。

私たちの要素は、スケーリングとして2回スケーリングされ、その後、60ピクセルを水平方向に、100ピクセルを垂直に翻訳しました。また、マトリックス関数を使用して、この製品を表すこともできます。変換：マトリックス（2、0、0、2、60、100）。ここで、これらの変換の順序、つまり変換：翻訳（30px、50px）スケール（2）を切り替えましょう。結果を以下に示します。

私たちのオブジェクトはまだスケーリングされた2倍のスケーリングであることに注意してくださいが、ここでは水平方向に30ピクセル、垂直方向に50ピクセルでパンします。マトリックス関数を使用すると、これは変換です：マトリックス（2、0、0、2、30、50）。

また、継承された変換関数が変換リストに類似していることは注目に値します。各子供の変換には、親に適用される変換が掛けられます。たとえば、次のコードを検討してください

これは、次と同じレンダリング効果です。

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

どちらの場合も、P要素の電流変換マトリックスは同じです。これまでのところ、2次元変換に焦点を当ててきましたが、上記は3次元変換にも適用されます。 3番目の次元は、深さの幻想を追加します。また、新しい機能とプロパティの形でいくつかの余分な複雑さをもたらします。

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

CSS

の2次元変換関数に関するよくある質問

CSSの2次元変換関数のさまざまなタイプは何ですか？

CSSには多くのタイプの2次元変換関数があります。これらには、translate（）、rotate（）、scale（）、skew（）、およびmatrix（）が含まれます。各関数を使用すると、さまざまな方法で要素を操作できます。たとえば、翻訳（）関数は現在の位置から要素を移動し、rotate（）関数は特定のポイントの周りに要素を回転させます。スケール（）関数は要素のサイズを変更し、スキュー（）関数はx軸とy軸に沿って要素をひねります。 Matrix（）関数は、これらすべての変換を1つに組み合わせます。

CSSで翻訳（）関数を使用する方法は？

CSSの翻訳（）関数は、要素を現在の位置から移動するために使用されます。 X軸値とY軸値の2つのパラメーターがあります。たとえば、要素を50ピクセルを右に、20ピクセルをダウンに移動する場合は、次のコードを使用できます。変換：翻訳（50px、20px）;これにより、ページ上の他の要素のレイアウトに影響を与えることなく、要素が新しい場所に移動します。

CSSの複数の2D変換関数を組み合わせることはできますか？

はい、CSSの複数の2D変換関数を組み合わせることができます。これを行うには、変換プロパティに各関数をリストし、スペースで分離します。たとえば、要素を2倍のサイズにスケーリングしてから45度回転させる場合、次のコードを使用できます。変換：スケール（2）回転（45DEG）;変換はリストされている順序で適用されます。

CSSのMatrix（）関数の目的は何ですか？

CSSのMatrix（）関数は、複数の変換を同時に実行できる非常に強力な変換関数です。 2×3マトリックスの値を表す6つのパラメーターがあります。このマトリックスは、スケーリング、回転、傾き、および翻訳変換の組み合わせを実行するために使用されます。他の変換関数よりも複雑ですが、変換プロセスを高度な制御を提供します。

skew（）関数はCSSでどのように機能しますか？

CSSのskew（）関数は、x軸とy軸に沿って要素をねじるために使用されます。 x軸の傾斜角とy軸の傾斜角の2つのパラメーターがあります。たとえば、X軸に沿って30度、Y軸に沿って20度を30度傾ける場合、次のコードを使用できます。変換：Skew（30Deg、20Deg）;。これにより、要素が歪んで、傾斜効果が生じます。

CSSのHTML要素に2D変換関数を使用できますか？

はい、CSSの任意のHTML要素に2D変換関数を使用できます。これには、ブロックレベルの要素（divなど）とインライン要素（スパンなど）が含まれます。ただし、変換の適用方法は、要素の種類とレイアウト内の位置によって異なる場合があることを忘れないでください。

CSSで翻訳（）関数にユニットを指定しないとどうなりますか？

CSSの翻訳（）関数の単位を指定しない場合、これらの値はピクセル値として扱われます。これは、変換を意味します。翻訳（50、20）;ただし、通常は、明確さと一貫性を確保するために、常にユニットを指定することが最善です。

CSSで2D変換をアニメーション化する方法は？

Transitionプロパティを使用して、CSSの2D変換をアニメーション化できます。このプロパティを使用すると、遷移の期間、タイミング機能、および遅延を指定できます。たとえば、2秒で回転をアニメーション化する場合は、次のコードを使用できます。これにより、指定された期間の回転がスムーズにアニメーション化されます。

CSSのrotate（）とskew（）関数の違いは何ですか？

CSSのrotate（）およびskew（）関数は、さまざまな方法で要素で動作します。回転（）関数は特定のポイントの周りに要素を回転させ、skew（）関数はxおよびy軸に沿って要素をひねります。これは、Rotate（）が要素の方向を変化させ、Skew（）が要素の形状を変更することを意味します。

CSSの他のCSSプロパティで2D変換関数を使用できますか？

はい、他のCSSプロパティを使用してCSSで2D変換関数を使用できます。たとえば、Transform PropertyをBorder-Radiusプロパティと組み合わせて使用​​して、丸い角を持つ回転要素を作成できます。ただし、プロパティが適用される順序は最終結果に影響することを忘れないでください。

以上がCSSで2D変換関数を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。