CSS perspective() Function – How to Add Perspectives to Elements
perspective() transforms an element by adding some perspective effects to it.
Syntax of the CSS perspective()
Function
perspective()
accepts only one argument. Here is the syntax:
element {
transform: perspective(length);
}
The length
argument specifies the user's distance to the z=0 plane.
What Is the z=0 Plane?
The z=0 plane is the point on the Cartesian coordinate system where the coordinate z
equals zero (0
).
z=0 Plane vs. perspective()
: What Is the Difference?
The z=0 plane is the point on the z-axis where z
equals zero (0
).
The CSS perspective()
function defines the distance between the user and the imagery plane located at the coordinate z=0.
In other words, suppose you pass a positive length
argument to the CSS perspective()
function. In that case, the greater the length, the farther the distance between you and the z=0 plane.
For instance, a perspective(70px)
method creates a 70px
distance between you and the z=0 plane. While a perspective(300px)
method creates a 300px
distance.
- The
perspective()
method's argument must be a positive value. Otherwise, the browser will apply no perspective effect on the selected element. - List
perspective()
first whenever you chain it with other CSS transform functions. Otherwise, browsers might transform the selected element incorrectly.
Examples of the CSS perspective()
Function
We often use perspective()
with other CSS functions such as translateZ()
, rotateX()
, and rotateY()
. Below are some examples.
How to use perspective()
with the CSS translateZ()
function
- CSS
- HTML
img {
width: 40%;
}
.second-image {
transform: perspective(33px) translateZ(10px);
}
<img
class="first-image"
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
<img
class="second-image"
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
Here's what we did in the snippet above:
- We used the
perspective()
function to define a33px
distance between the user and the z=0 plane. - We used the
translateZ()
function to reposition thesecond-image
ten pixels (10px
) away from its original position along the z-axis.
Note the following:
- Suppose the
second-image
's z-axis position is larger than or equal to theperspective()
function's argument. In that case, the image will disappear as though it is behind the user. In other words, the selected item disappears when the user is in the same position as the element. Or when the element is behind the user. - The larger the user's distance to the element's z-axis position, the less intensive the perspective effect will be, and vice-versa.
How to use perspective()
with the CSS rotateY()
function
- CSS
- HTML
img {
width: 40%;
}
.second-image {
transform: perspective(33px) rotateY(-10deg);
}
<img
class="first-image"
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
<img
class="second-image"
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
Here's what we did in the snippet above:
- We used the
perspective()
function to define a33px
distance between the user and the z=0 plane. - We used the
rotateY()
function to rotate thesecond-image
negative ten-degree (-10⁰) around the y-axis.
How to use perspective()
with the CSS rotateX()
function
- CSS
- HTML
img {
width: 40%;
}
.second-image {
transform: perspective(33px) rotateX(17deg);
}
<img
class="first-image"
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
<img
class="second-image"
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
Here's what we did in the snippet above:
- We used the
perspective()
function to define a33px
distance between the user and the z=0 plane. - We used the
rotateX()
function to rotate thesecond-image
seventeen-degree (17⁰) around the x-axis.
Overview
This article discussed what a CSS perspective()
function is. We also used examples to see how it works.