oujood.com

Affichage de la face arrière d'un élément : backface-visibility

La propriété backface-visibility définit si la face arrière d'un élément doit être visible ou non lorsqu'elle fait face à l'utilisateur.
La face arrière d'un élément est une image miroir de la face avant affichée.
Cette propriété est utile lorsqu'un élément est pivoté. Elle vous permet de choisir si l'utilisateur doit voir la face arrière ou non.

chercher |

Définition et utilisation da la propriété css backface-visibility

La propriété backface-visibility détermine si la face arrière d'un élément est visible ou non pour l'utilisateur. Il s'agit d'une image miroir de la face avant qui est affichée comme face arrière d'un élément pour l'utilisateur. Elle est utile lorsqu'un élément est tourné, car elle permet de décider si la face arrière d'un élément est visible ou non.

La Syntaxe CSS
backface-visibility: visible|hidden|initial|inherit;
Valeurs par défaut
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript:

Prise en charge de la propriété css backface-visibility dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion36
12 -webkit-
1016
10 -moz-
4 -webkit-23
15 -webkit-

Exemple                   Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
	<title>CSS la propriété backface-visibility</title>
        <style>
            div {
                position: relative;
                height: 190px;
                width: 190px;
                FONT-SIZE:35PX;
                COLOR:WHITE;
                text-align:center;
                padding:20px;
                background-color: #003668;
                -webkit-transform: rotateY(180deg);
                transform: rotateY(180deg);
            }
             
            #GEEKS {
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }
        </style>
    </head>
    <body>
        <center>
        <h1 style="color:#003668;">WWW.OUJOOD.COM</h1>
        <h2 style="color:#003668;">
            backface-visibility:visible;
        </h2>
        <div id="ouj">oujoud pour apprendre</div>
        </center>
    </body>
</html>

Exemple : Modifier la visibilité de la face arrière de l'élément DIV avec JavaScript       Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
	<html lang="fr">
<head>
<meta charset="UTF-8">
	<title>CSS la propriété backface-visibility</title>
        <style> 
div {
  width: 300px;
  background: #003668;
  color: white;
  animation: monAnimation 3s infinite linear alternate;
}

@keyframes monAnimation {
  to {transform: rotateY(180deg);}
}
</style>
</head>
<body>

<h1>Modifier la visibilité arrière avec JavaScript</h1>

<p>Modifier la visibilité arrière avec JavaScript<br>
Cochez/décochez la case pour modifier la visibilité de la face arrière de l'élément DIV animé :</p>
<div id="ouj"><h1>OUJOOD.COM POUR APPRENDRE</h1></div>
<input type="checkbox" onclick="maFOnction(this)" checked>backface-visibility

		<script>
function maFOnction(x) {
  if (x.checked === true) {
    document.getElementById("ouj").style.WebkitBackfaceVisibility = "visible"; // Safari
    document.getElementById("ouj").style.backfaceVisibility = "visible";
  } else {
    document.getElementById("ouj").style.WebkitBackfaceVisibility = "hidden"; // Safari
    document.getElementById("ouj").style.backfaceVisibility = "hidden";
  }
}
</script>
    </body>
</html>   

Valeurs de la propriété backface-visibility

visible Valeur par défaut. La face arrière est visible
hidden La face arrière n'est pas visible
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son élément parent.


Voir aussi nos tutoriel :

La pagination avec PHP et MySQL

Ce tutoriel va vous montrer comment sélectionner des données dans une base de données MySQL, les répartir sur plusieurs pages, pour les afficher page par page à l'aide de numéros de page

Référence MIME

Référence MIME

fonction date

Formate une date/heure locale