CSS Transform Perspective を使用して台形形状を作成するにはどうすればよいですか?

CSS3 で台​​形を描く

CSS3 で台​​形を作成するには、いくつかの賢いテクニックが必要です。 CSS3 3D 変換を使用するという提案にもかかわらず、CSS Transform Perspective を利用した最新の方法を検討します。

CSS Transform Perspective

CSS Transform Perspective プロパティは、3D 空間を導入します。要素を使用して、指定した視点を中心に要素を回転できるようにします。要素に遠近法の値を適用し、軸 (X、Y、または Z) のいずれかに沿って回転させると、台形の錯覚を作成できます。

例

次の CSS コードを考えてみましょう:

HTML:

この例では、クラス .trapezoid の要素は幅と高さが 200 で構成されています。ピクセル、赤い背景、および 10 ピクセルの遠近法と X 軸に沿った 1 度の回転を適用する変換。

結果の要素は、上下がわずかに歪んだ台形として表示されます。遠近値が増加するにつれて、効果はより顕著になります。

以上がCSS Transform Perspective を使用して台形形状を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。