La backface-visibilitypropiedad se relaciona con las transformaciones 3D. Con las transformaciones 3D, puede administrar rotar un elemento para que lo que consideramos como el "frente" de un elemento ya no mire hacia la pantalla. Por ejemplo, esto alejaría un elemento de la pantalla:
.flip ( transform: rotateY(180deg); )Parecerá que lo recogió con una espátula y lo volteó como un panqueque. Eso es porque el valor predeterminado para backface-visibilityes visible. En lugar de que sea visible, puede ocultarlo.
.flip ( transform: rotateY(180deg); backface-visibility: hidden; )Ejemplo simple:
Vea el Pen FjwGA de Chris Coyier (@chriscoyier) en CodePen.
Esto es útil cuando se realizan efectos 3D. Por ejemplo:
Trabaja apropiadamente
Frente atrásProblemático en WebKit porque la visibilidad del reverso no está oculta
Frente atrásEsto no es problemático en Firefox por el motivo que sea, aunque la propiedad funciona de la misma manera.
Prefijos
Compatible backface-visibilitycon Firefox 10+ e IE 10+ sin prefijo. Opera (post Blink, 15+), Chrome, Safari, iOS y Android, todos lo necesitan -webkit-backface-visibility.
Valores
- visible (predeterminado): el elemento siempre estará visible incluso cuando no esté frente a la pantalla.
- oculto : el elemento no es visible cuando no está frente a la pantalla.
- Heredar : la propiedad obtendrá su valor de su elemento padre.
- inicial : establece la propiedad a su valor predeterminado, que es
visible.
Más información
- Probador de CSS 3D
- Especificaciones
- Documentos de Mozilla
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |
