backface-visibility - Propriété CSS
Résumé des caractéristiques de la propriété backface-visibility
visible
| hidden
visible
backface-visibility
passe d'une valeur à l'autre sans transition.Description.
La propriété backface-visibility
définit si la face arrière d'un élément est affichée dans le cas où celui-ci a été tourné ou est en rotation en 3D.
Pour tourner un élément, voir la propriété CSS transform
.
Syntaxes pour backface-visibility
.
backface-visibility:
;
- backface-visibility: visible;
Valeur par défaut. La face arrière est affichée lorsque l'élément est "de dos".
- backface-visibility:
initial
; backface-visibility:inherit
; backface-visibility:revert
; backface-visibility:revert-layer
; backface-visibility:unset
;La valeur initiale est :
.visible
Manipulation de la propriété backface-visibility
par programme.
L'élément ci-dessous est animé par une rotation autour de l'axe Y
. Il présente donc alternativement sa face avant, puis sa face arrière.
Lorsque la propriété backface-visibility
est modifiée, l'effet est visible immédiatement sur l'affichage.
Modifier la valeur de backface-visibility
en Javascript.
Javascript accepte deux syntaxes : la première en notation kebab-case
, typique de CSS (un tiret pour séparer les mots),
et la deuxième en notation en camel-case
plus courante en Javascript (une majuscule pour séparer les mots).
function setBackfaceVisibility(el) {
el.style['backface-visibility']='hidden';
// ou
el.style.backfaceVisibility='hidden';
}
Lire en Javascript la valeur de backface-visibility
.
Ce code récupère la valeur de la propriété backface-visibility
lorsque celle-ci a été affectée via l'attribut style
du HTML,
ou par un code Javascript comme celui qui est donné plus haut. Si la propriété a été définie via un sélecteur CSS, sa valeur ne sera pas
lue.
function getBackfaceVisibility(el) {
alert(el.style['backface-visibility']);
// ou
alert(el.style.backfaceVisibility);
}
Lire la valeur calculée de backface-visibility
en Javascript.
La valeur calculée résulte de l'évaluation du mécanisme d'héritage. Cela peut être la valeur attribuée à la propriété directement sur l'élément
par l'attribut style
, la valeur affectée via un sélecteur CSS, une valeur héritée, ou la valeur initiale de la propriété.
function getCalcBackfaceVisibility(el) {
alert(window.getComputedStyle(el).getPropertyValue('backface-visibility'));
}
Modifier la valeur de la propriété backface-visibility
avec JQuery.
function setBackfaceVisibility(el) {
$(el).css('backface-visibility','visible');
// ou
$(el).css('backfaceVisibility','visible');
}
Lire la valeur calculée de la propriété backface-visibility
avec JQuery.
function getCalcBackfaceVisibility(el) {
alert($(el).css('backface-visibility'));
// ou
alert($(el).css('backfaceVisibility'));
}
Simulateur.
Prise en charge par les navigateurs (compatibilité).
Les transformations 3D et la propriété backface-visibility
sont maintenant très bien reconnues par les navigateurs actuels.
backface-visibility
.
backface-visibility
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que backface-visibility
.
Les spécifications CSS éditées par le W3C sont organisées en modules. backface-visibility
fait partie du Module CSS - Transformations (CSS Transforms Module). Les définitions suivantes sont également décrites dans ce même module.