La propiedad backface-visibility decide si la cara posterior de un elemento puede ser visible o no para el usuario. Es una imagen especular de la cara frontal que se muestra como la cara posterior de un elemento para el usuario. Es útil cuando se gira un elemento, entonces decide si la cara posterior de un elemento es visible o no.
Sintaxis:
backface-visibility: visible|hidden|initial|inherit;
Propiedad: visible: Es el valor por defecto. La cara posterior de un elemento es visible cuando está de frente al usuario.
- Sintaxis:
backface-visibility:visible;:
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | backface-visibility Property
</title>
<style>
div {
position: relative;
height: 190px;
width: 190px;
FONT-SIZE:35PX;
COLOR:WHITE;
text-align:center;
padding:20px;
background-color: GREEN;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#GEEKS {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForGeeks</h1>
<h2 style="color:green;">
backface-visibility:visible;
</h2>
<div id="Gfg">Geeks For Geeks</div>
</center>
</body>
</html>
- Producción:
oculto: los valores de esta propiedad especifican que la cara posterior de un elemento está oculta cuando mira al usuario.
- Sintaxis:
backface-visibility:hidden;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | backface-visibility Property
</title>
<style>
div {
position: relative;
height: 190px;
width: 190px;
FONT-SIZE:35PX;
COLOR:WHITE;
text-align:center;
padding:20px;
background-color: GREEN;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#GEEKS {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForgeeks</h1>
<h2 style="color:green;">
backface-visibility:hidden;
</h2>
<div id="GEEKS">Geeks For Geeks</div>
</center>
</body>
</html>
- Producción:
initial: Establece la propiedad a su valor por defecto.
- Sintaxis:
backface-visibility:initial;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | backface-visibility Property
</title>
<style>
div {
position: relative;
height: 190px;
width: 190px;
FONT-SIZE:35PX;
COLOR:WHITE;
text-align:center;
padding:20px;
background-color: GREEN;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#GEEKS {
-webkit-backface-visibility: initial;
backface-visibility: initial;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForgeeks</h1>
<h2 style="color:green;">
backface-visibility:initial;
</h2>
<div id="GEEKS">Geeks For Geeks</div>
</center>
</body>
</html>
- Producción:
Navegador compatible: los navegadores compatibles con la propiedad backface-visibility se enumeran a continuación:
- Google Chrome 36.0
- Borde 12.0
- Internet Explorer 10.0
- Firefox 16.0
- Ópera 23.0
- Safari 15.4
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA