Yogesh Chauhan's Blog

perspective property in CSS

in CSS on February 14, 2021

As per Vocabulary.com, perspective is the appearance of things relative to one another as determined by their distance from the viewer.

Using this perspective property, we can add some perspective to an element that are positioned in 3D. It determines the distance between the z=0 plane and the user or in other words, it determines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

When we define the perspective property for an element, the CHILD elements gets the perspective view.

Example

Few things to remember

  • If the value is 0 or a negative number, no perspective transform is applied.
  • Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller.
  • The parts of the 3D elements that are behind the user — i.e. their z-axis coordinates are greater than the value of the perspective CSS property — are not drawn.
  • The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.

It’s supported by most modern browsers.

Credit: w3Schools and MDN


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to create Glowing Texts using CSS?CSSWhat Does Host-Based Intrusion Detection System (HIDS) Mean and What Are Some Advantages Over NIDS?MiscellaneousHow to remove WordPress TinyMCE Editor buttons?WordPressSELF JOIN in PostgresPostgresHow to modify navigation menus in WordPress?WordPressWhy it’s not a good idea to create Number objects in JavaScript?JavaScriptDifference between :where and :is in CSSCSSAlways add associated labels to your Form elementsUI/UXAvoid using new Array() in JavaScriptJavaScriptOOP, Class and Objects Strategies For Beginners (PHP)PHPIs Software Really Eating The World? I don’t think soMiscellaneousHow to import a CSS file using PHP code and not HTML code?PHP