3D Perspective Strategy
Hi, I am having trouble understanding how 3d perspective is intended to work. The attempted css effect seems dependent on the screen size. The wider the screen the more intense the css results. Codepen: https://codepen.io/kevinmclane/pen/xbKNGXP
Is there a correct dynamic approach or do I need to incorporate media queries?
3 Replies
For 3D perspective in CSS, the
perspective property determines how the depth of elements is rendered. The intensity of the 3D effect can appear to vary depending on the screen size because the perspective is influenced by the size of the viewport. It’s especially noticeable when using percentages or fixed values for transformations like translateZ, rotateY, or rotateX.
For example:
• A smaller viewport makes elements appear closer together, amplifying the 3D effect.
• A larger viewport spreads elements further apart, reducing the perceived intensity.
You can use media queries or use JavaScript to update a custom property that sets your perspective value dynamicallyThank you for your response. Do you have any insight to a formula to manage this dynamically?
Have you identified what perspective values work for certain breakpoints for your project ?