What is the different of css "perspective: " and "transform: perspective()"?

Question

They should be do the same thing right? Also set up the 3d perspective for the child? But is there any different in browser support or others?

Answer 1

The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user.

The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The greater the value, the more subtle will be the effect.

Important: Please note the perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children elements. This is the main difference between the transform: perspective() function and the perspective property. The first gives element depth while the later creates a 3D-space shared by all its transformed children.

Refer to https://css-tricks.com/almanac/properties/p/perspective/