manual de referencia de CSS

CSS @reglas (RULES)

大全 de CSS propiedades

Propiedad background CSS CSS3 animation-timing-Atributo function

CSS3 backface-Método de uso y ejemplo de la propiedad visibility

CSS3de backface-La propiedad visibility determina si el 'lado posterior' del elemento transformado es visible cuando está facing al usuario.

La siguiente tabla resume el contexto de uso y el historial de versiones de esta propiedad.

Valor predeterminado:	visible
Aplicable a:	Elementos transformables
Herencia:	Ninguno
Animable:	No.Consulte Atributos de animación。
Versión:	CSS3nueva funcionalidad
Sintaxis de JavaScript:	object.style.backfaceVisibility="hidden"

backface-La sintaxis de uso de visibility

La sintaxis de esta propiedad es la siguiente:

backface-visibility: visible | hidden | initial | inherit

El siguiente ejemplo muestra cómo utilizar backface-Atributo visibility.

Ejemplo

.flip-container　{
　　　　　　　　margin:　50px;
　　　　　　　　perspective:　1000px;
　　　　　　　　display:　inline-block;
　　　　}
　　　　.flip-container:hover　.card　{
　　　　　　　　transform:　rotateY(180deg);
　　　　}
　　　　.card,　.front,　.back　{
　　　　　　　　width:　130px;
　　　　　　　　height:　195px;
　　　　}
　　　　.card　{
　　　　　　　　position:　relative;
　　　　　　　　transition:　0.5s　all;
　　　　　　　　transform-style:　preserve-3d;
　　　　}
　　　　.front,　.back　{
　　　　　　　　position:　absolute;
　　　　　　　　backface-visibility:　hidden;
　　　　}
　　　　.front　{
　　　　　　　　z-index:　1;
　　　　　　　　transform:　rotateY(180deg);
　　　　}
　　　　.back　{
　　　　　　　　z-index:　2;
　　　　　　　　transform:　rotateY(0deg);
　　　　}

Prueba para ver‹/›

Nota：backface-El atributo visibility es muy útil para crear animaciones como la rotación de monedas o el volteo de tarjetas, donde se mezclan dos imágenes diferentes (es decir, la parte delantera y la parte trasera) para crear un mejor3Efecto de rotación D.

Valor del atributo

La siguiente tabla describe los valores de este atributo.

Valor	Descripción
visible	Especificar que la parte trasera es visible, permitiendo que se muestre el espejo de la parte delantera. Este es el valor predeterminado.
hidden	Especificar que la parte trasera no es visible, ocultar la parte delantera.
initial	Establecer este atributo en su valor predeterminado.
inherit	Si se especifica, el elemento asociado utiliza el backface de su elemento padre-Valor calculado del atributo visibility.

Compatibilidad del navegador

backface-Compatibilidad del navegador del atributo visibility, todos los navegadores principales lo soportan.

	Firefox 10+ ^-moz-，16 + Google Chrome 12+ ^-webkit-，36+ Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 15+ ^-o-，23+ ^-webkit-

Leer más

Ver los siguientes tutoriales：CSS3Transición，CSS3 3Transformación D，CSS3Animación。

Propiedades relacionadas：perspective，perspective-origin，transform，transform-origin，transform-style，transition。

Propiedad background CSS CSS3 animation-timing-Atributo function