SkewとMatrix変換
skew()で斜めの歪みを作り、matrix()で完全な変換行列を適用します。
「SkewとMatrix変換」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
skew() による変形
skew() は要素を一方または両方の軸に沿って傾け、ブロック要素に斜めまたはイタリック体のような歪みを作ります。
<div class="diagonal-section">Section</div>
<span class="italic-badge">Badge</span>skewX() と skewY()
各軸に対して個別にスキューを適用します。
<div class="banner">Slanted background</div>子要素のスキューを打ち消す
コンテナーをスキューすると、その子要素もスキューされます。子要素に逆方向のスキューを適用すると、子要素を正しい向きに保てます。
<div class="container"><p>Child text stays upright</p></div>matrix() による変形
matrix(a, b, c, d, tx, ty) 関数は、2D 変形の基礎となる数学的表現です。移動、回転、拡大・縮小、スキューを 1 つの行列演算にまとめます。
<div class="element">Matrix transform</div>3D 用の matrix3d()
matrix3d() は 16 個の値に拡張され、3D アフィン変形を完全に制御できます。通常は、複雑な 3D 効果を実現するために JavaScript が生成します。
実践的なスキュー：斜めのセクション
よく使われるデザインパターンの 1 つが、背景をスキューしたセクションです。
<div class="section-diagonal"><p>Diagonal background section</p></div>UI のアクセントにスキューを使う
スキューを使うと、バッジ、リボン風のアクセント、強調表示したテキストに動きのある視覚効果を加えられます。
<span class="badge"><span>NEW</span></span>3D コンテキストのための perspective
3D 変形には、親要素に perspective コンテキストが必要です。perspective は、閲覧者から z=0 平面までの距離を設定します。
<div class="scene"><div class="card">Card</div></div>変形関数の適用順序
複数の transform 関数を組み合わせた宣言では、その順序が重要です。rotate then translate と translate then rotate では結果が異なります。
<div class="scene-row">
<span class="order-rotate-first">A</span>
<span class="order-translate-first">B</span>
</div>スキューのアニメーション
スキューは、スライダーやカード反転の効果に合わせて transition できます。他の transform と組み合わせると、自然な動きを作れます。
<div class="card demo-active">Card</div>確認問題
要素に transform: skewX(-15deg) が適用されています。この要素のテキストの子要素はどうなりますか。
まとめ
skewX/Y() は、装飾的なセクション区切りや動きのある UI アクセントに斜めの歪みを作ります。子要素のコンテンツを正しい向きに保つには、逆方向のスキューを適用します。matrix() は、すべての 2D 変形を組み合わせる基礎的な数学表現です。連結した transform 関数の順序は、最終的な結果に大きく影響します。
よくある質問
「SkewとMatrix変換」レッスンは無料ですか？
はい。「SkewとMatrix変換」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「SkewとMatrix変換」で何を学びますか？
skew()で斜めの歪みを作り、matrix()で完全な変換行列を適用します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「SkewとMatrix変換」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。