Exemplo
Deixe os elementos filhos transformadas preservar as transformações 3D:
div
{
-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
transform: rotateY(60deg);
transform-style: preserve-3d;
}
Tente você mesmo " Definição e Uso
A propriedade em estilo de transformar especifica como elementos aninhados são renderizados no espaço 3D.
Note: Esta propriedade deve ser usado em conjunto com a transformar a propriedade.
Para entender melhor a propriedade em estilo de transformar, ver uma demonstração .
| Valor padrão: | flat |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.transformStyle="preserve-3d" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| transform-style | 36,0 12,0 -webkit- | 11.0 | 16,0 10,0 -moz- | 9 4.0 -webkit- | 23,0 15,0 -webkit- |
CSS Syntax
transform-style: flat|preserve-3d|initial|inherit;Valores de propriedade
| Valor da propriedade | Descrição |
|---|---|
| plano | Especifica que os elementos filho não vai preservar a sua posição 3D. Este é o padrão |
| preservar-3d | Especifica que os elementos filho vai preservar a sua posição 3D |
| inicial | Define essa propriedade para o valor padrão. Leia sobre inicial |
| herdar | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
Tutorial CSS: CSS 2D Transformadas
Tutorial CSS: transformações CSS 3D
HTML DOM de referência: transformStyle property