Atributo transform-style de CSS

Definición y uso

El atributo transform-style define cómo se presenta en el espacio 3D el elemento anidado.

Comentarios:Este atributo debe utilizarse junto con transform utilizados junto con el atributo.

Véase también:

Tutorial de CSS3:Transformación 2D de CSS3

Tutorial de CSS3:Transformación 3D de CSS3

Manual de referencia de HTML DOM:Atributo transformStyle

Ejemplo

Hacer que los elementos hijos convertidos conserven su transformación 3D:

div {
  transform: rotateY(60deg);
  transform-style: preserve-3d;
}

Prueba por ti mismo

Sintaxis de CSS

transform-style: flat|preserve-3d;

Valor del atributo

Valor Descripción
flat Los elementos hijos no conservarán su posición 3D.
preserve-3d Los elementos hijos conservarán su posición 3D.

Detalles técnicos

Valor predeterminado: flat
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: object.style.transformStyle="preserve-3d"

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que completamente soporta la propiedad.

Los números con -webkit- o -moz- indican la primera versión con prefijo utilizada.

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 11.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-