Giving elements 3D perspective with CSS

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):

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):

Both ways are well supported in modern browsers.

Ask me anything / Suggestions