Comment puis-je incliner un seul côté d'un élément à l'aide de la transformation CSS3 ?

Transformation asymétrique CSS3 sur un côté

Lorsque vous essayez de créer un effet asymétrique à l'aide de la transformation en CSS3, il peut être difficile de l'appliquer à un seul côté d'un élément. , surtout si vous travaillez avec des images. Voici une solution qui vous permet d'obtenir cet effet souhaité.

La clé est d'utiliser une structure div imbriquée. Attribuez la transformation d'inclinaison au div parent, où vous souhaitez que l'asymétrie globale soit appliquée. Cependant, pour conserver les proportions d'origine de l'image, créez un div enfant (par exemple, celui qui affiche l'image en arrière-plan) et appliquez-lui une valeur d'inclinaison opposée.

Par exemple, si vous avez un div parent avec une inclinaison de 20 degrés, vous pouvez attribuer une inclinaison de -20 degrés au div enfant qui contient l'image. Cela annule l'asymétrie de l'image, la faisant apparaître non asymétrique dans le div parent asymétrique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!