CSS3 Transform Perspective を使用して台形を作成する方法

台形の CSS3 作成

Google モバイル サイトにアクセスすると、ページの上部に美しいバーがあることに気づくかもしれません。この記事では、CSS3 を使用してこの効果を再現する方法について説明します。

考えられるアプローチの 1 つは、3 次元空間内の要素を操作する手段を提供する CSS3 3D 変換です。ただし、より最近のテクノロジーでは、実行可能な代替手段が提供されています。

CSS Transform Perspective

CSS を使用して台形を描画するには、CSS Transform Perspective プロパティの利用を検討してください。このテクニックでは、要素に遠近法を適用して 3 次元効果を作成します。次の例は、これを実現する方法を示しています。

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}

<div class="trapezoid"></div>

Transform Perspective プロパティを組み込むことにより、台形を X 軸に沿って回転して 3D 効果を作成できます。遠近感と回転の値を調整して、必要に応じて台形の形状と向きをカスタマイズします。

以上がCSS3 Transform Perspective を使用して台形を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。