perspective

Definition

The perspective CSS property defines the distance between the viewer and the z=0 plane, creating a 3D context for elements with 3D transformations. By adjusting this distance, the intensity of the 3D effect and the perceived depth of transformed elements can be controlled.

Examples

Set the perspective distance to 500px:

.box {
  perspective: 500px;
}

Set the perspective distance to a percentage of the viewport width:

.box {
  perspective: 50vw;
}

Set the perspective distance to a length value:

.box {
  perspective: 1000px;
}

Values

Best Practices

• Use this property in conjunction with the transform property to create a 3D effect that accurately represents the intended depth and distortion of the transformed element.
• Experiment with different values for the perspective property to achieve the desired visual effect. Smaller values create a stronger 3D effect, while larger values create a weaker 3D effect.
• Keep in mind that the perspective property only affects elements that are transformed using the transform property with 3D transformation functions.
• Test your content on different devices and in different browsers to ensure that it renders correctly and looks good across a variety of contexts.
• Consider using 3D graphics libraries or frameworks, such as Three.js or Babylon.js, to create more complex and sophisticated 3D effects.

Browser Compatibility