この記事では、TransformInについて理解します。 詳細に説明し、詳細な実践的なデモンストレーションを行います。この記事では、次のポイントについて説明します。
ウェブサイトの機能の進歩に伴い、ウェブサイトを魅力的でより良いものにするために、ウェブサイトに巧妙な統合を提供することも同様に重要です。あなたのサイトを補完する様々なCSS要素を追加することは時間の必要です。
人々は、大衆に本当にアピールしないWebサイトから離れています。それでは、いくつかの要素を変換して、より低い圧縮値でCSSを美化してみてはどうでしょうか。
同様のニーズを満たすために、要素を傾斜、回転、スケーリング、または変換することによって要素を変換する変換CSSプロパティがあります。
変換CSSとは何ですか？
CSS要素を変換するということは、2Dまたは3D形式でエッジを提供することを意味します。要素のスタイルを視覚的に変更します。
2D変換は、X軸とY軸で機能します。両方の軸に任意のエッジまたは構造を指定して、変更を加えることができます。 3D変換の場合、必要な深さを提供するために、X、Y、およびZ軸で機能する必要があります。
CSS 2D変換プロパティ：
| 関数 | 説明 |
マトリックス（ n、n、n、n、n、n ） | 6つの値のマトリックス |
translate（ x、y ） | 要素がX軸とY軸に沿って移動できるようにします |
translateX（ n ） | 要素がX軸に沿って移動できるようにします |
translateY（ n ） | 要素がY軸に沿って移動できるようにします |
規模（ x、y ） Javaの文字列のデフォルト値 | 要素の幅と高さを変更します |
scaleX（ n ） | 要素の幅を変更します |
scaleY（ n ） | 要素の高さを変更します |
回転（ 角度 ） | パラメータで指定された角度で要素を回転させることができます |
斜め（ x-angle、y-angle ） | X軸とY軸に沿って要素を傾斜させます |
スキューX（ 角度 ） | X軸に沿って要素を傾斜させます |
スキューY（ 角度 ） | Y軸に沿って要素を傾斜させます |
CSS 3D変換プロパティ：
プロパティ | 説明 |
変換 | 要素に2Dまたは3D変換を適用します |
変換元 | 変換された要素の位置を変更できます |
トランスフォームスタイル | ネストされた要素が3D空間でどのようにレンダリングされるかを指定します |
視点 | 3D要素の表示方法に関する視点を指定します |
遠近法-起源 | 3D要素の最下部の位置を指定します |
背面-可視性 | 画面に面していないときに要素を表示するかどうかを定義します |
例えば：
css .element {幅：20px高さ：20px変換：scale（20）}これで、そうすると、定義された要素が20倍にスケーリングされます。
これだけでなく、水平スケーリングと垂直スケーリングのために軸ごとにスケーリングすることもできます。
変換：scaleX（2）変換：scaleY（.5）
すべてのブラウザで適切な変換を提供するには、次のことができます。
div {-webkit-transform：scale（1.5）-moz-transform：scale（1.5）-o-transform：scale（1.5）transform：scale（1.5）}変換CSSプロパティは、CSSビジュアルフォーマットレベルの座標空間を改善します。
ビジュアルフォーマットレベルとは何ですか？
ビジュアルフォーマットレベルとは、ドキュメントを処理し、メディアプラットフォームに視覚的に表示することを意味します。視覚的な書式設定を使用すると、CSSボックスモデルと一致するモデルとして各要素を変換できます。 CSSボックスモデルは、サイズ、位置、およびプロパティを定義する標準の長方形のボックス形式で要素を定義します。
注意： 変換可能な要素のみを変換できます。
さまざまな変換プロパティは何ですか？
すべての変換プロパティを見てみましょう。
1.scale（）： スケーリングとは、要素のサイズを水平方向または垂直方向に変更することを意味します。
垂直スケーリングの場合：scaleX
水平スケーリングの場合：scaleY
要素の場合、フォントサイズ、パディング、高さ、または幅を変更することもできます。デフォルト値は1です。これは、値が半分になるので0.5を指定し、2を指定するとスケーリングが2倍になることも意味します。
2.skew（）： スキュープロパティを使用すると、ユーザーは1つの座標点から要素を右または左に傾けることができます。長方形を平行四辺形に変えるようなものです。要素はその座標によって歪めることができます。
例：
.element {変換：skewX（25deg）} .element {変換：skewY（25deg）これを行うと、要素はskewXまたはskewYを使用して、水平方向および垂直方向に25度傾斜します。
3.回転（ ） ：このプロパティを使用すると、要素を時計回りに回転させることができます。 180度または360度回転させて、元の場所に戻すことができます。
.element {変換：rotate（25deg）}回転を提供する場合も、rotateX、rotateY、rotateZの3つの次元のいずれかを使用できます。
4. translate（ ） ：要素を適切に上下逆または横に移動できます。
.element {変換：変換（20px、10px）}Translateは、指定されたオブジェクト/要素を上下逆または横に移動します。最初に指定した値はオブジェクトを右方向に移動し（負の値はオブジェクトを左側に移動します）、2番目の値はオブジェクトを下に移動します（負の値を指定するとオブジェクトは上方向に移動します）。
これで混乱する可能性がある場合は、X軸を適用して要素の位置を水平方向に変更し、Y軸を適用して位置を垂直方向に変更します。変換プロパティの最も驚くべき側面は、変換を適用すると要素の移動のみが許可され、他のすべての要素またはテキストはそのまま維持されることです。距離は通常、ピクセルまたはパーセンテージで取得されます。
例えば：
.element {変換：translateX（値）変換：translateY（値）}5.spective（）：要素のパースペクティブに深さを指定できます。変換で要素を立方体にすることにより、要素に3D変換を与えることができます。
translate3d（x、y、z）
translateZ（z）
translate3d（x、y、z）translateZ（z）
z軸の導入により、要素に3D視覚化が提供されます。 translateZ（）は要素をビューアに向かって移動し、負の値は要素を離れます。
6. matrix（） ：すべての変換を1つに結合します。
回転（45度）平行移動（24px、25px）
matrix（）を適用すると、すべての変換プロパティが1つの配列に結合されます。
変換プロパティを適用すると、要素を大幅に強化できるため、Webサイトの魅力を高めることができます。それらを試してみてください！
これで、CSSでの変換に関するこの記事は終わりです。
ウェブ開発について詳しく知りたい場合は、 Edurekaによる。 Web開発認定トレーニングは、HTML5、CSS3、Twitter Bootstrap 3、jQuery、およびGoogle APIを使用して印象的なWebサイトを作成し、それをAmazon Simple Storage Service（S3）にデプロイする方法を学ぶのに役立ちます。
それでも興味がある場合は、この「CSSとは」ブログのコメントセクションに投稿してください。できるだけ早くご連絡いたします。