Grow your CSS skills. Land your dream job.

perspective

Last updated on:

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-

Comments

  1. Simple yet very effective!

  2. Rash
    Permalink to comment#

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

  3. 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 24Ways.org 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.
    W3Schools.com 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 W3Schools.com, 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. 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.

    http://cybernext.in/Services

    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. Tyler
    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.

    • 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.

  6. 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!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".