CSS3 Transform を使用して要素の片側だけを傾けるにはどうすればよいですか?

CSS3 の片側での傾いた変形

CSS3 の変形を使用して傾いた効果を作成しようとする場合、要素の片側だけに適用するのが難しい場合があります。特に画像を扱う場合はそうです。この望ましい効果を達成できるソリューションを次に示します。

重要なのは、ネストされた div 構造を利用することです。全体的な歪みを適用したい親 div に歪み変換を割り当てます。ただし、画像の元のアスペクト比を維持するには、子 div (たとえば、画像を背景として表示するもの) を作成し、それに逆のスキュー値を適用します。

たとえば、親 div のスキューが 20 度の場合、画像を含む子 div に -20 度のスキューを割り当てることができます。これにより、画像の歪度が相殺され、歪んだ親 div 内で画像が歪んでいないように見えます。

以上がCSS3 Transform を使用して要素の片側だけを傾けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。