The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user.

The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The greater the value, the more subtle will be the effect.

Important: Please note the perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children elements. This is the main difference between the transform: perspective() function and the perspective property. The first gives element depth while the later creates a 3D-space shared by all its transformed children.

 * Syntax
 * perspective: none | <length> 

.parent {
    perspective: 1000px;

.child {
    transform: rotateY(50deg);
Check out this Pen!

The above demo aims at showing the difference between the function and the property.

  • On the left side, you can see the property applied to the parent (perspective: 50em) of transformed elements (transform: rotateY(50deg)).
  • On the right side, the perspective is applied from the transform directly on children (transform: perspective(50em) rotateY(50deg)).

This shows how setting perspective on the parent make all children share the same 3D-space and thus the same vanishing point.

Let's try something even cooler: a cube with 3D transforms and perspective.

Check out this Pen!

Here is how the cube is made: it relies on two nested wrappers (one to give the cube perspective and one to wrap all the sides) and 6 elements to make the sides. Each element is given its own transform mixing translating and rotating in the 3D-space (e.g. transform: rotateX(90deg) translateZ(1em)).

Let's finish with a demo featuring what could be the base of a real world design: a wall of photographs + captions using perspective and transform.

Check out this Pen!

When hovering over the wall, the children are rotated back to their normal position, cancelling the effect.

Important! Using perspective (with a value different from 0 or none) creates a new stacking context.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
12+ Any 10+ None 10+ 3+ Any

Firefox 10-15 need -moz-, WebKit browsers may need -webkit-


  1. User Avatar
    Allan McAvoy
    Permalink to comment#

    Simple yet very effective!

  2. User Avatar
    Permalink to comment#

    This will be there in the future 3D design world I think. :)

  3. User Avatar
    Ricardo Zea
    Permalink to comment#

    I know I’m late to the party, but I just want to add something else:

    If you’re using Compass with Sass and want to use the perspective mixin, they tell you to do this: @include perspective( perspective );.

    Now, according to Compass’ documentation: “…’perspective’ is a unitless number…”.

    So you would do something like this: @include perspective( 1000 ); The problem is that this is wrong.

    In order for the perspective to work you DO have specify a unit (px, %, em or rem).

    Like so: @include perspective( 1000px );

    And the output would be:

    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;

    I decided to look around to see what other reputable sites say about the perspective property, and found out several things:

    This article in has it wrong. Note: That article is from December 2010, so I’m not sure if the spec changed since then and now a unit is required. has it wrong, of course!. Not only has it wrong because its examples don’t use units, but even more so, because in the list of supported browsers they have Firefox crossed out and we know this works just fine in Firefox (even without vendor prefixes). Note: The term “reputable” obviously does not apply to, we all know this now :).
    As I said above, Compass’ documentation has it wrong too.
    MDM (Mozilla Developer Network) has it right.
    Safari Developer Library has it right.

    Gonna post this same information on Twitter in less than 140 characters :) – lol

  4. User Avatar
    Permalink to comment#

    I’ve always used this site as a reference for all my CSS3 developments.
    Just wanted to share my work, though it’s basic, I’ve tried to be creative with it.

    Here, I’ve used Perspective twice, one inside the other, to get a better 3D effect for the signboard. I had to use double backgrounds:
    .signboard //background
    transform: perspective(1000px);
    transform-style: preserve-3d;

        .signbg  //second background
        transform: perspective(1000px);
        transform-style: preserve-3d;

    Then I used Transform and Transition to move the board when hovered

    #b1 {
    position: absolute;
    border: 5px solid #ffffff;
    border-right: 0px;
    background-color: #d92b2f;
    transform-origin: 0% 0%;
    transform: rotateY(-30deg);
    transition: 1s;
    #b1:hover {
    transform: rotateY(0deg);
    transition: 1s;
    text-shadow: 0px 0px 20px #ffffff;
  5. User Avatar
    Permalink to comment#

    I’m sorry, I can’t continue with the article until I know what you actually meant by this line:

    “The smaller the value, the closer you get from the Z plane”

    Did you mean “the closer you get to the Z plane” or “the farther you get from the Z plane”? What you’ve written is just wrong.

    • User Avatar
      Permalink to comment#

      The meaning implied here is “the closer you get TO the Z plane”. Must have been a typo.

      If you put a smaller value, say 200, the element/3D object appears up close and the effect appears more ‘prominent’.
      Whereas if you put a greater value, say 1000, our view appears to be shifted farther away from the object and we see the ‘wider picture’. And as a result the effect doesn’t seem so prominent.

      Imagine holding a cube 2 cm from your face as compared to keeping it at a distance of 50 cm. This distance is exactly what is represented by the value of perspective.

    • User Avatar
      Permalink to comment#

      @Vin Thanks for the clear explanation!

  6. User Avatar
    Lucas Rolff

    Actually the perspective affects the rendering in webkit engines, it’s usually not seen on desktop environments, but on iPhone or other smartphones having retina display, you’ll often find the rendering of your child elements blurry, a small example..

    The image below shows a table where one of the parent elements (.row in this case), has a perspective of ‘none’, as you can see the picture is sharp and nice.

    The next image, shows exact same table, but where the parent element (.row), is having a perspective of 4000, and the result rendered on retina displays is really different:

    So the perspective surely affects the rendering!

  7. User Avatar
    Permalink to comment#

    Easy to understand!

  8. User Avatar
    Nick Overman
    Permalink to comment#

    Any ideas for IE9 fallback?

    • User Avatar
      Permalink to comment#

      IE9 is obsolete. Stop wasting your time on IE9. Tell your client to upgrade their browsers.

    • User Avatar
      Nick Overman
      Permalink to comment#

      Very helpful Paul, thank you.

    • User Avatar
      Permalink to comment#

      IE9 is obsolete. Stop wasting your time on IE9. Tell your client to upgrade their browsers.
      A year further down the line and I still think this comment is shocking! Who are you to suggest such redicoulousness?

  9. User Avatar
    Permalink to comment#

    give a perspective about html?

  10. User Avatar
    Permalink to comment#

    Very nice explanation on ‘perspective’ that it doesn’t affect how the element is rendered; it simply enables a 3D-space for children elements.
    Thank you!

  11. User Avatar
    Permalink to comment#

    What about the perspective() function. Does anyone know what which browsers support this function? I’ve looked around a little but couldn’t find anything.

  12. User Avatar
    Permalink to comment#

    A quick test suggest that perspective() works in Safari 11, Firefox 58, Chrome 65 and IE11. Although IE11 doesn’t support multiple transformations as used in the MDN demo.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.