El enfoque de este artículo es mostrar u ocultar la parte posterior de un elemento cuando se gira mediante el uso de la propiedad backface-visibility en CSS. 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;
Ejemplo: el siguiente código se usa para mostrar la parte posterior del elemento <div> girado 180 grados.
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
height: 60px;
width: 210px;
font-size: 35PX;
color: white;
text-align: center;
padding: 20px;
background-color: blue;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#GFG {
-webkit-backface-visibility: visible
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForGeeks</h1>
<h2 style="color:green;">
How to visible or hide the backside
of a rotated division element?
</h2>
<div id="GFG">GeeksForGeeks</div>
</center>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<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:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA