CSS Transform で傾きを実現する方法: 両側を歪ませる

CSS 変換による傾きの実現: 両側の傾き

提供された画像は、要素の両方の角に角度を付ける興味深い傾き効果を示しています。 CSS 変換を使用してこの効果を再作成するには、次の手順に従います。

遠近歪みの適用:

遠近感を追加するには、次の CSS プロパティを使用します:

transform: perspective(distance) rotateY(angle);

「距離」を遠近距離を設定する値に置き換えます (値が大きいほど、遠近感が作成されます)。 「angle」を目的の回転角度 (この場合は 45 度) に置き換えます。

CSS の例:

.red-box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}

HTML コード:

要素にスキューを適用するには、次のクラスを追加します。

<div class="red-box"></div>

外部リソースからの例:

提供された CSS と HTMLコードは http://desandro.github.com/3dtransforms/docs/perspective.html から派生しています。この Web サイトでは、透視変換の使用に関するさらなる例とドキュメントを提供しています。

以上がCSS Transform で傾きを実現する方法: 両側を歪ませるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。