manual de referência CSS

CSS @regras (RULES)

大全 de propriedades CSS

Propriedade background do CSS CSS3 animation-timing-Atributo function

CSS3 backface-Método de uso e exemplo da propriedade visibility

CSS3de backface-A propriedade visibility determina se a parte de trás do elemento transformado é visível quando voltada para o usuário.

A tabela a seguir resume o contexto de uso e o histórico de versões deste atributo.

Valor padrão:	visible
Aplicável a:	Elementos deformáveis
Herança:	Nenhum
Animável:	Não.Veja também Propriedade de animação.
Versão:	CSS3nova funcionalidade
Sintaxe do JavaScript:	object.style.backfaceVisibility="oculto"

backface-Sintaxe de uso da propriedade visibility

A sintaxe deste atributo é a seguinte:

backface-visibility: visível | oculto | inicial | herdado

O exemplo a seguir demonstra como usar backface-Atributo visibility.

Exemplo

.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);
　　　　}

Teste para ver‹/›

Atenção:backface-O atributo visibility é muito útil para criar animações como rotação de moeda ou virada de cartão, onde duas imagens diferentes (ou seja, a parte frontal e a parte de trás) são misturadas para criar uma melhor3Efeito de rotação D

Valor da propriedade

A tabela a seguir descreve os valores dessa propriedade.

Valor	Descrição
visible	Especifique que a parte de trás é visível, permitindo que a parte frontal seja exibida como espelho. Isso é o valor padrão.
hidden	Especifique que a parte de trás não é visível, escondendo a parte frontal.
initial	Defina essa propriedade para seu valor padrão.
inherit	Se especificado, o elemento relacionado adota o backface do elemento pai-Valor calculado do atributo visibility.

Compatibilidade do navegador

backface-Compatibilidade do atributo visibility do navegador, todos os navegadores populares suportam essa propriedade.

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