English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

libro de referencia CSS

reglas CSS @

大全 de atributos CSS

CSS3 transform-Método de uso y ejemplo del atributo style

transform-El atributo style CSS especifica que los elementos hijos del elemento se posicionan en3si se planifica, los elementos hijos no existirán independientemente en el espacio tridimensional.

Este atributo solo se aplica a los elementos que tienentransformSubelementos del atributo especificado.

La tabla a continuación proporciona una descripción de uso y registro histórico de esta propiedad, así como la sintaxis de uso de esta propiedad en el script JavaScript.

Valor predeterminado:flat
Aplique a:Elementos deformables
Herencia:No
Animable:No.Ver: Atributos de animación.
Versión: CSS3nueva característica
JavaScript sintaxis:object.style.transformStyle="preserve-3d"

transform-Sintaxis de uso de style

La sintaxis de este atributo es la siguiente:

transform-style: flat | preserve-3d | initial | inherit

El siguiente ejemplo muestra cómo usar transform-Atributo style.

img {
    /* Chrome, Safari, Opera */
    -webkit-transform: rotate(30deg);
    -webkit-transform-style: preserve-3d;
    /* Firefox */
    -moz-transform: rotate(30deg);
    -moz-transform-style: preserve-3d;
    /* IE 9 */
    -ms-transform: rotate(30deg);
    -ms-transform-style: preserve-3d;
    
    transform: rotate(30deg);
    transform-style: preserve-3d;
}
Prueba aquí‹/›

Valor del atributo

La tabla a continuación describe los valores de esta propiedad.

ValorDescripción
flatLos elementos hijos del elemento se planifican, es decir, se encuentran en el plano del elemento mismo. Este es el valor predeterminado.
preserve-3dLos elementos hijos del elemento deben colocarse en3en el espacio D.
initialEstablezca este atributo en su valor predeterminado.
inheritSi se especifica, el elemento asociado utiliza el transform del elemento padre-El valor del atributo style.

Compatibilidad del navegador

transform-La compatibilidad del navegador del atributo style, los números en la tabla a continuación indican la versión mínima del navegador que admite la propiedad; todos los navegadores principales admiten esta propiedad.

  • Firefox 10+ -moz-,16 +

  • Chrome 12+ -webkit-,36+

  • Internet Explorer 11+

  • Apple Safari 4+ -webkit-

  • Opera 15+   -webkit-,23+

Leer más

Consulte la siguiente guía:CSS3 2Transformación D,CSS3 3Transformación D

Propiedades relacionadas:backface-visibility,perspective,perspective-origin,transform,transform-origin.