CSS3 transform-The usage method and example of style attribute

transform-The style CSS attribute specifies that the child elements of the element are positioned in3whether it is tiled in D space or in the element plane. If flattened, the child elements will not exist independently in three-dimensional space.

This attribute only applies to elements withtransformSpecify the child elements of the attribute.

The following table provides usage instructions and version history of this attribute, as well as its usage syntax in JavaScript scripts.

transform-The syntax of style usage

The syntax of this attribute is as follows:

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

The following examples demonstrate how to use transform-style attribute.

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

Attribute value

The following table describes the value of this attribute.

Browser compatibility

transform-Browser compatibility of style attributes, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

For further reading

Please refer to the following tutorial:CSS3 2D transformation,CSS3 3D transformation

Related attributes:backface-visibility,perspective,perspective-origin,transform,transform-origin.