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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
JavaScript: how to detect a browser using the user agent?JavaScriptSome Useful Operators in The SQL WHERE ClauseSQL/MySQLThe ALPHA function in Envision BasicEnvision BasicRecursive WITH Queries in Postgres (Common Table Expressions)PostgresSteps to Install Microsoft SQL Server on a MacOSSQL/MySQLWordPress: How to print ACF array field values?WordPressWhat are partials in SCSS (Sass)?SCSSHow to create a simple tab interaction using CSS?CSSSubquery in PostgresPostgresHAVING Clause in Postgres with Examples in All Aggregate FunctionsPostgresHow to Access a Global Variable From Inside a Function in PHP?PHPSolution to Precision Problem in JavaScript NumbersJavaScript