Giving elements 3D perspective with CSS

📄 OneThingWell.dev wiki page | 🕑 Last updated: Oct 13, 2022

There are two ways you can use to give 3d elements some perspective in CSS.

The first one is by using the perspective property, and the second one is by using the transform: perspective() function.

perspective

perspective CSS property can be applied to any 3d transformed element, by setting the property on its parent element:

<div class="text">Hello world</div>
<div class="perspective"><div class="text">Hello world</div></div>

<style>
.text {
  border: 1px solid gray;
  padding: 10px;
  transform: rotateX(30deg);
}

.perspective {
  perspective: 400px;
}
</style>

Result (preview):

Hello world
Hello world

Note: Since transform works only on elements with 3d transformations, I'm using a simple rotateX() transformation as an example.

transform: perspective()

The second way is by using the transform: perspective() function, which can be applied to directly to the element:

<div class="text">Hello world</div>
<div class="text perspective">Hello world</div>

<style>
.text {
  border: 1px solid gray;
  padding: 10px;
  transform: rotateX(15deg);
}

.perspective {
  transform: perspective(200px) rotateX(15deg);
}
</style>

Result (preview):

Hello world
Hello world

Both ways are well supported in modern browsers.


Comments and suggestions

You can use this form to submit a suggestion or a comment.

If you find this site useful in any way, please consider supporting it.