CSS perspective Property

The perspective property gives 3D elements a perspective view.

Perspective defines how far away the object is from the user.

This property is assigned to a parent element.

Only child elements will get a perspective view.

Example

#

A 3D transformed child element. Its parent provides the perspective view.

Rotated box
<style>
  .perspective {
    padding: 50px;
    perspective: 100px;
    margin-left: 10px;
  }

  .rotate {
    width: 150px;
    padding: 30px;
    text-align: center;
    background: lightblue;
    transform: rotateX(15deg);
  }
</style>

<div class="perspective">
  <div class="rotate">Rotated box</div>
</div>

Tip: Lower perspective values give a stronger 3D effect, and 0 gives no effect.

Syntax

perspective: length | none | initial | inherit;

Values

#

Value Description
length Placement length (distance) of the element from the view
none Default, same as 0. No perspective is set
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Creating a perspective cube.

<style>
  .cube-perspective {
    width: 200px;
    height: 200px;
    margin: 80px 80px;
    position: relative;
    display: inline-block;
    perspective: 1800px;
    perspective-origin: -250% -150%;
  }

  .cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
  }

  .cube div:not(:last-of-type) {
    width: 196px;
    height: 196px;
    display: block;
    position: absolute;
    border: 2px solid firebrick;
  }

  .cube .front {
    background-color: pink;
    transform: rotateY(0deg) translateZ(100px);
  }

  .cube .back {
    background-color: red;
    transform: rotateX(180deg) translateZ(100px);
  }

  .cube .right {
    background-color: purple;
    transform: rotateY(90deg) translateZ(100px);
  }

  .cube .left {
    background-color: red;
    transform: rotateY(-90deg) translateZ(100px);
  }

  .cube .top {
    background-color: brown;
    transform: rotateX(90deg) translateZ(100px);
  }

  .cube .bottom {
    background-color: orange;
    transform: rotateX(-90deg) translateZ(100px);
  }
</style>

<section class="cube-perspective">
  <div class="cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="right"></div>
    <div class="left"></div>
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</section>  

Did you know?

Did you know?

Creating 3D animations with the perspective property

A 3D animations can be created with the help of the CSS perspective property. Try it live in our CSS editor and move your mouse around.

<style>
  .room-perspective {
    width: 100%;
    height: 100%;
    margin: 0;
    perspective: 1000px;
  }

  .room {
    width: 100%;
    height: 300px;
    transform-style: preserve-3d;
    transform-origin: center;
  }

  .room div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0ff;
    background-image: url("/img/css/wall.jpg")
  }

  .w-back {
    transform: translateZ(-500px);
  }

  .w-top {
    top: 0;
    left: 0;
    transform-origin: center top;
    transform: rotateX(-90deg);
  }

  .w-bottom {
    bottom: 0;
    left: 0;
    background-image: url("/img/css/floor.jpg") !important;
    transform-origin: center bottom;
    transform: rotateX(90deg);
  }

  .w-right {
    top: 0;
    right: 0;
    transform-origin: right center;
    transform: rotateY(-90deg);
  }

  .w-left {
    top: 0;
    left: 0;
    transform-origin: left center;
    transform: rotateY(90deg);
  }

  .w-bottom {
    color: #fff;
    text-shadow: 1px 1px 2px #000;
  }
</style>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

<script>
  $(document).on("mousemove", function (e) {
    var Xperc = e.pageX / $(window).width();
    var Yperc = e.pageY / $(window).height();
    posx = 100 - Math.floor(Xperc * 100);
    posy = 100 - Math.floor(Yperc * 100);
    $("section").css({ perspectiveOrigin: posx + '% ' + posy + '%' });
  });

  $("section").on("mousewheel", function (n, i) {
    var per = parseInt($(this).css("perspective"), 10);
    if ((i < 0) && (per < 2200)) {
      $("section").css({ perspective: '+=50px' });
    }
    if ((i > 0) && (per > 600)) {
      $("section").css({ perspective: '-=50px' });
    }
  })

</script>

<section class="room-perspective">
  <div class="room">
    <div class="w-back"></div>
    <div class="w-top"></div>
    <div class="w-bottom"></div>
    <div class="w-right"></div>
    <div class="w-left"></div>
  </div>
</section>

Browser support

This table shows when perspective support started for each browser.

Chrome
36.0 Jul 2014
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
23.0 Jul 2013
Safari
9.0 Sep 2015

You may also like

Guides