Manuel de référence CSS

Règles CSS @RULES

大全 des attributs CSS

Attribut background CSS CSS3 animation-timing-function propriété

CSS3 backface-Méthode d'utilisation et exemples de l'attribut visibility

CSS3de backface-La propriété visibility détermine si le "côté arrière" de l'élément transformé est visible face à l'utilisateur.

Le tableau suivant résume l'utilisation et l'historique des versions de cette propriété.

Valeur par défaut :	visible
Appliqué à :	Élément transformable
Héritage :	Aucun
Animable :	Non.Voir également Propriété d'animation。
Version :	CSS3nouvelle fonctionnalité
Syntaxe JavaScript :	object.style.backfaceVisibility="hidden"

backface-Syntaxe d'utilisation de visibility

La syntaxe de cette propriété est la suivante :

backface-visibility:　visible　|　hidden　|　initial　|　inherit

L'exemple suivant montre comment utiliser backface-propriété visibility.

Exemple

.flip-container　{
　　　　　　　　margin:　50px;
　　　　　　　　perspective:　1000px;
　　　　　　　　display:　inline-block;
　　　　}
　　　　.flip-container:hover　.card　{
　　　　　　　　transform:　rotateY(180deg);
　　　　}
　　　　.card,　.front,　.back　{
　　　　　　　　width:　130px;
　　　　　　　　height:　195px;
　　　　}
　　　　.card　{
　　　　　　　　position:　relative;
　　　　　　　　transition:　0.5s　all;
　　　　　　　　transform-style:　preserve-3d;
　　　　}
　　　　.front,　.back　{
　　　　　　　　position:　absolute;
　　　　　　　　backface-visibility:　hidden;
　　　　}
　　　　.front　{
　　　　　　　　z-index:　1;
　　　　　　　　transform:　rotateY(180deg);
　　　　}
　　　　.back　{
　　　　　　　　z-index:　2;
　　　　　　　　transform:　rotateY(0deg);
　　　　}

Vérifiez le test‹/›

Attention :backface-La propriété visibility est très utile pour créer des animations telles que les tours de monnaie ou les virages de cartes, où deux images différentes (c'est-à-dire le côté avant et le côté arrière) sont mélangées pour créer un meilleur3Effet de rotation D.

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cette propriété.

Valeur	Description
visible	Spécifiez que le côté arrière est visible, permettant l'affichage de l'image miroir du côté avant. C'est la valeur par défaut.
hidden	Spécifiez que le côté arrière est invisible, cachez le côté avant.
initial	Définir cette propriété à sa valeur par défaut.
inherit	Si spécifié, l'élément lié utilise le backface de son élément parent-Valeur calculée de la propriété visibility.

Compatibilité du navigateur

backface-La compatibilité du navigateur de la propriété visibility, tous les navigateurs populaires supportent cette propriété.

	Firefox 10+ ^-moz-，16 + Google Chrome 12+ ^-webkit-，36+ Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 15+ ^-o-，23+ ^-webkit-

Lire davantage

Voir les tutoriels suivants :CSS3Transition，CSS3 3D transformation，CSS3Animation。

Propriétés associées :perspective，perspective-origin，transform，transform-origin，transform-style，transition。

Attribut background CSS CSS3 animation-timing-function propriété