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

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

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

キーポイント

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

rotate（）

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

rotate（）関數(shù)は、角度単位の値を受け入れます。角度単位は、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次元スケーリング関數(shù)：スケール、スケーレックス、スケール

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

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

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

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

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

2次元翻訳関數(shù)：translatex、translatey、翻訳

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

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

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

翻訳する?yún)g一のパラメーターを渡すことは、yranslatexの使用と同等です。翻訳（）を使用することは、より簡潔な選択です。翻訳（100px、200px）の適用は、translatex（100px）translatey（200px）に相當(dāng)します。

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

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

CSS変換仕様の最新バージョンは、翻訳、回転、および拡張屬性をCSSに追加します。変換プロパティは、対応する変換関數(shù)と非常に同様に機(jī)能しますが、値はコンマ分離ではなく空間分離されています。たとえば、変換を表現(xiàn)できます：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）。これらのプロパティを使用して、他のプロパティではなく、個別に回転、翻訳、またはスケーリング変換を管理できます。

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

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

せん斷変換

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

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

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

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

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

電流変換マトリックス

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

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

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

変換関數(shù)を使用する場合、

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

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

以下に示すように結(jié)果が得られます。

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

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

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

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

マトリックスの乗算とマトリックス関數(shù)

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS

の2次元変換関數(shù)に関するよくある質(zhì)問

CSSの2次元変換関數(shù)のさまざまなタイプは何ですか？

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

CSSで翻訳（）関數(shù)を使用する方法は？

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

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

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

CSSのMatrix（）関數(shù)の目的は何ですか？

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

skew（）関數(shù)はCSSでどのように機(jī)能しますか？

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

CSSのHTML要素に2D変換関數(shù)を使用できますか？

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

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

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

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

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

CSSのrotate（）とskew（）関數(shù)の違いは何ですか？

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

CSSの他のCSSプロパティで2D変換関數(shù)を使用できますか？

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

以上がCSSで2D変換関數(shù)を使用する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。