Maison > interface Web > tutoriel CSS > Pourquoi les transformations 3D dans Firefox sont-elles irrégulières et comment puis-je y remédier ?

Pourquoi les transformations 3D dans Firefox sont-elles irrégulières et comment puis-je y remédier ?

Susan Sarandon
Libérer: 2024-11-02 16:22:02
original
393 Les gens l'ont consulté

Why Are 3D Transforms in Firefox Jagged, and How Can I Fix It?

Transformations CSS et bords irréguliers : un dilemme pour Firefox

Lors de l'application de transformations 3D en CSS, vous pouvez rencontrer des bords irréguliers désagréables, en particulier dans Firefox. Contrairement à son homologue de Chrome, la propriété backface-visibility de Firefox ne parvient pas à résoudre ce problème.

Une solution de contournement ingénieuse consiste à ajouter un attribut de contour avec une couleur transparente. En définissant le contour sur 1px solide transparent, les bords de votre élément transformé se lissent comme par magie. Ce correctif a été vérifié sur Firefox version 10.0.2 fonctionnant sous Windows 7. Soyez témoin de la transformation dans ce JSFiddle : https://jsfiddle.net/nKhr8/

Si la couleur d'arrière-plan de votre écran n'est pas blanche, vous pouvez opter pour une solution de contournement légèrement différente. En ajoutant une bordure avec une couleur correspondant à votre arrière-plan (dans ce cas, le blanc), vous pouvez obtenir un effet d'anticrénelage similaire. Encore une fois, cette méthode a été testée sur Firefox version 10.0.2 sous Windows 7 et produit des résultats tout aussi nets. Voici la démonstration : https://jsfiddle.net/LPEfC/

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal