perspective

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.

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.

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

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;
}

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.

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:

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?

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. The tech stack for this site is fairly boring. That's a good thing! I've used WordPress since day one all the way up to v17, a decision I'm very happy with. I also leverage Jetpack for extra functionality and Local for local development.