CSS | perspective() Function
The perspective() function is an inbuilt function in CSS which is used with transform property to set the perspective effect on images.
Syntax:
perspective( length );
Parameters: This function accepts single parameter length which is used to hold the value of perspective level. The length value represents the distance from user to z=0 plane. It is mandatory parameter.
Return value: It makes the image perspective on the basis of user define value.
Below example illustrates the perspective() function in CSS:
Example:
<!DOCTYPE hyml> <html> <head> <title> CSS | perspective() function </title> <style> h1 { color: green; } .left { transform: perspective(400px) rotateY(70deg); } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h4>CSS | perspective() function</h4> <div> <img class="left" src= alt="Sample image"> <img class="right" src= alt="Sample image"> </div> </center> <body> </html> |
chevron_right
filter_none
Output:
Supported browser: The browser supported by CSS | perspective() function are listed below:
- Google Chrome
- Internet Explorer/ Microsoft Edge
- Mozila Firefox
- Safari
- Opera
Recommended Posts:
- CSS | perspective Property
- CSS perspective-origin Property
- HTML | DOM Style perspective Property
- How to call a function that return another function in JavaScript ?
- How to get the function name from within that function using JavaScript ?
- p5.js | nf() Function
- PHP | pow( ) Function
- D3.js | d3.min() function
- p5.js | sq() function
- p5.js | abs() function
- CSS | var() Function
- PHP | pi( ) Function
- D3.js | d3.map.set() Function
- D3.js | d3.set.add() Function
- p5.js | str() function
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
