What is the difference between perspective and transform's perspective properties in CSS?

Question

In our application we use a temporary css transform as a page transition.

With the latest build of google chrome (37) this stopped working. The transformation has no

Answer 1

My basic understanding of perspective vs transform perspective is simply that the plain perspective attribute is what you usually use on a parent element to give multiple children the same perspective, while transform perspective would be used on a child element or an individual element to give it its own perspective.

This is most easily seen when you are applying these effects to more than one element:

perspective: ; on a parent element:

.perspective-Parent {
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  -webkit-perspective: 2000px;
  perspective: 2000px;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
.page {
  background-color: red;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -o-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -ms-transform: rotateY(75deg);
  -moz-transform: rotateY(75deg);
  -o-transform: rotateY(75deg);
  -webkit-transform: rotateY(75deg);
  transform: rotateY(75deg);
  width: 200px;
  height: 100px;
  margin: 10px; /* added to make difference more visible */ 
}

<div class="perspective-Parent">
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
</div>

Notice that all three "pages" in the above example are being viewed from a common perspective.

---

transform: perspective(); on the individual elements:

.page {
  background-color: red;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -o-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -ms-transform: perspective(2000px) rotateY(75deg);
  -moz-transform: perspective(2000px) rotateY(75deg);
  -o-transform: perspective(2000px) rotateY(75deg);
  -webkit-transform: perspective(2000px) rotateY(75deg);
  transform: perspective(2000px) rotateY(75deg);
  width: 200px;
  height: 100px;
  margin: 10px; /* added to make difference more visible */ 
}

<div class="perspective-Parent">
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
</div>

Notice on this example that the three "pages" each have their own perspective.

---

Now that that's all out of the way...

Neither approach is incorrect they just offer different visual effects, just pick the one that you prefer.

Answer 2

Accepted answer here is not correct.

You can indeed do a perspective transform on a parent element. For this to work, you need to set transform-style: preserve-3d; on the parent.

.perspective-Parent{
  transform: perspective(2000px);
  transform-style: preserve-3d;
}

.page {
  background-color: red;
  transform-origin: right center;
  transform: rotateY(75deg);
  width: 200px;
  height: 100px;
  margin: 10px;
}

<div class="perspective-Parent">
<div class="page">
</div>
<div class="page">
</div><div class="page">
</div>
</div>

When I test out different perspectives in chrome, the perspective property gives some strange distortions.

.box{
  width: 100px; 
  height: 100px;
  margin-left: 100px;
}

.no-perspective-box{ 
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(15deg);
}

.perspective-prop-box{
  perspective: 7.5cm;
  transform-style: preserve-3d; /*This is required here too*/
  transform: rotateX(-15deg) rotateY(15deg);
}

.perspective-box{ 
  transform-style: preserve-3d;
  transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
}

.face{
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

.top{
  background-color: blue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left{
  background-color: red;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front{
  background-color: green;
  transform: translate3d(0, 0, 50px);
}

<p>Without Perspective:</p>
<div class="box no-perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>
<br /><br />
<p>With Perspective Property:</p>
<div class="box perspective-prop-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>
<br /><br />
<p>With Perspective Function:</p>
<div class="box perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>
<br /><br />

Answer 3

To activate 3D space, an element needs perspective. This can be applied in two ways: using the transform property, with the perspective as a functional notation.

transform: perspective( 600px );

or using the perspective property:

perspective: 600px;

Perspective Projection vs. Perspective Transformation

Perspective Projection calculates the perspective view (i.e., foreshortening) of a 3D object onto a 2D projection plane. The effect of viewing in perspective is achieved, and, of course, the z-values (depth information) are discarded in the process.

Perspective Transformation allows us to see how the perspectively foreshortened and projected polygons will overlap, without discarding the z-values (which we need to use later for depth comparison).

Answer 4

The order matters in case of declaring the property and the function, the "perspective" function must come right after the "transform" property!

WRONG CODE

transform:rotateX(45deg) perspective(100px);

CORRECT CODE

transform:perspective(100px) rotate(45deg);