CSSでのスキューは何を意味しますか

skew は「傾き」を意味し、CSS の組み込み関数であり、要素の傾きを変換するには、transform 属性と一緒に使用する必要があります。 CSS の傾きには、X 軸と Y 軸に沿った傾き変換「skew(x-angle,y-angle)」、「skewX(angle)」または「skewY(angle)」の 3 種類があります。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

#skew は「傾き」を意味し、CSS の組み込み関数であり、要素の傾き変換には、transform 属性と一緒に使用する必要があります。

Transform プロパティは、要素の 2D または 3D 変換に適用されます。このプロパティを使用すると、要素の回転、拡大縮小、移動、傾斜などが可能になります。

skew() には 3 種類あります

• ##skew(x-angle,y-angle) X 軸と Y 軸に沿った 2D スキュー変換を定義します。

• skewX(angle) X 軸に沿った 2D スキュー変換を定義します。

• skewY(angle) Y 軸に沿った 2D スキュー変換を定義します。

skewX()

要素を傾けて角度を設定します。↓の下に、次のように表示されます。要素が傾いていても、実際の高さは同じままです。賢い人なら、高さが一定であるということは、Y 軸が伸びていることを意味することがわかるでしょう。

スケールと同じで、変化するのは軸のスケールです。 →scale

##skew

は skewx と skewy を組み合わせたものですが、違いがあります。

単一パラメータを使用する場合、skewx と skewy を単独で使用するのと同じ効果があります。

ただし、! 2 つのパラメーターを同時に使用する場合、skewx と skewy を同時に使用する場合とは少し異なります。

では、なぜこのような違いが生じるのでしょうか?実はその理由は非常に単純で、skewX(40deg), skewY(40deg) の実行順序としては、まず X 軸に従って 40deg 傾け、次に Y 軸に従って 40deg 傾けるのですが、 skew(40deg, 40deg) は実行されません。これはそうではありません。同時に操作するので、結果は若干異なります。

学習ビデオの推奨:

css ビデオ チュートリアル

以上がCSSでのスキューは何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。