CSS3 Usage and examples of perspective property

The perspective CSS property defines the perspective for all child elements of the viewing object. It usually determines the distance between the Z = 0 plane and the viewer, in order to give3Position the element with a sense of depth. Each Z > 0 element3The D element becomes larger, while each Z < 0 element3The D element becomes smaller.

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

Perspective usage syntax

The syntax of this attribute is as follows:

perspective: length | none | initial | inherit

The following example demonstrates how to use the perspective attribute.

.container {
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　500px;
　　　　border:　4px solid #e5a043;
　　　　background: #fff2dd;
}
.transformed {
　　　　-webkit-transform: translate3d(25px,　25px,　50px);　/*　Chrome, Safari, Opera　*/
　　　　transform: translate3d(25px,　25px,　50px);　
}

Attribute value

The following table describes the value of this attribute.

Browser compatibility

The compatibility of the perspective attribute in browsers, the numbers in the following table 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 3D transformation.

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