CSS3 perspective attribute

The perspective property defines the distance of the 3D element from the view, in pixels. This property allows you to change the view of the 3D element by viewing the 3D element.

When you define a perspective property for an element, its child elements get a perspective effect, not the element itself.

to sum up:

When using CSS 3D transform properties, turn on GPU hardware acceleration , transform:translate3d(0,0,0);and use the above code to improve performance.

To better understand this case, you need to be familiar with the use of these attributes. The corresponding prefix is ​​not added to the above CSS code. Please use the autoprefixer plugin to add it yourself .

The following table lists all the conversion properties:

Attributes

description

CSS

transform

Apply a 2D or 3D transformation to the element.

3

transform-origin

Allows you to change the position of the converted element.

3

transform-style

Specifies how nested elements are displayed in 3D space.

3

perspective

Specifies the perspective of the 3D element.

3

perspective-origin

Specifies the bottom position of the 3D element.

3

backface-visibility

Defines whether the element is visible when it is not facing the screen.