Ejemplo
Deje que los elementos secundarios transformadas conservan las transformaciones 3D:
div
{
-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
transform: rotateY(60deg);
transform-style: preserve-3d;
}
Inténtalo tú mismo " Definición y Uso
La propiedad de estilo transformar especifica cómo los elementos anidados son prestados en el espacio 3D.
Note: Esta propiedad debe ser utilizado junto con el de transformar la propiedad.
Para comprender mejor el establecimiento de estilo transformar, ver una demostración .
| Valor por defecto: | flat |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.transformStyle="preserve-3d" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit- o -moz- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| transform-style | 36.0 12.0 -webkit- | 11.0 | 16.0 10.0 -moz- | 9.0 4.0 -webkit- | 23.0 15.0 -webkit- |
sintaxis CSS
transform-style: flat|preserve-3d|initial|inherit;Valores de propiedad
| El valor de la propiedad | Descripción |
|---|---|
| plano | Especifica que los elementos hijo no va a conservar su posición en 3D. Esto es por defecto |
| preserve-3d | Especifica que los elementos hijos preservar su posición 3D |
| inicial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
| heredar | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Páginas relacionadas
CSS tutorial: las transformaciones CSS 2D
CSS tutorial: CSS transformaciones 3D
Referencia HTML DOM: transformStyle property