CSS3 3D deformation and perspective perspective CSS3 2D deformation (transform) move, zoom, rotate, skew

The css3 2D transformation (transform) moves, zooms, rotates, and tilts.

There are 2D and 3D. For example, 3D transform has the following three methods:

• rotateX( angle )
• rotateY( angle )
• rotateZ( angle )

The perspective property defines the distance of the 3D element from the view, in pixels (usually 500px). This property allows you to change the 3D element's view of the 3D element.

When the perspective property is defined for an element, its child elements get the perspective effect, not the element itself.

Currently none of the browsers support the perspective attribute.

Chrome and Safari support an alternate -webkit-perspective property.

Note: The perspective property affects only 3D transform elements.

For more knowledge about 3d and perspective, you can refer to Zhang Xinxu's predecessor's article - CSS3 3D transform transformation, but so