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

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

遠近傾斜の適用:

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

transform: perspective(distance) rotateY(angle);

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

CSS の例:

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

HTML コード:

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

外部リソースの例:

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