CSS Transform を使用してオブジェクトの両方の角を傾けるにはどうすればよいですか?

CSS Transform による角の傾斜

CSS では、transform プロパティは 2D および 3D 空間でオブジェクトを操作するための多彩なオプションを提供します。その機能の 1 つは傾斜です。これには、特定の軸に沿ってオブジェクトの形状を歪めることが含まれます。

角を傾斜させる挑戦

オブジェクトの両方の角を傾斜させることは、次のように見えるかもしれません。これは簡単なタスクですが、transform プロパティだけを使用して直接達成することはできません。 skew() 関数は、一度に 1 つの軸のみを傾斜させます。

3D パースペクティブからレスキュー

両方の角を傾斜させるには、3D パースペクティブ変換を利用する手法を使用します。 。オブジェクトに遠近法を適用することで、奥行きの錯覚を作成し、角の傾きをシミュレートする方法で要素を傾けることができます。

遠近法変換によるソリューション

目的の効果を実現する CSS コードは次のとおりです:

<code class="css">.red.box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}</code>

HTML:

<code class="html"><div class="box red"></div></code>

説明:

• perspective(600px) は、オブジェクトから 600 ピクセル離れた視点で 3D 遠近効果を作成します。
• rotateY(45deg) は、Y 軸に沿ってオブジェクトを 45 度回転します。 3D 空間でのこの回転により、上隅と下隅の両方が歪んでいるような錯覚が生じます。

http://desandro.github.com/3dtransforms/docs/perspective.html から引用されたこのソリューションは、 CSS 変換を使用して目的の効果を達成するエレガントな方法。これは、CSS の力と、Web ページ上の要素を操作するために CSS が提供する創造的な可能性の証です。

以上がCSS Transform を使用してオブジェクトの両方の角を傾けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。