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 longer a perspective.

Fiddling with the developer tools I was able to restore the correct behavior by changing the definition of the perspective on the parent element from

perspective: 2000px;

to

transform: perspective(2000px);

My question is: is something wrong with our existing declaration (using the perspectice property) or is this a bug in google chrome?

I tried to recreate the problem below, but in the reduced example I see the reverse effect, that now perspective works and transform:perspective not.

Any thoughts?

.perspective-Parent {
    /*-moz-transform: perspective(2000px);
    -ms-transform: perspective(2000px);
    -o-transform: perspective(2000px);
    -webkit-transform: perspective(2000px);
    transform: perspective(2000px);*/
  
    -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;
}

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

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 />