Visibilidad de la cara posterior - Trucos CSS

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ás

Problemático en WebKit porque la visibilidad del reverso no está oculta

Frente atrás

Esto 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.