title: What is the difference between perspective and transform's perspective properties in CSS?
body: <p>In our application we use a temporary css transform as a page transition.</p>
  
  <p>With the latest build of google chrome (37) this stopped working. The transformation has no longer a perspective.</p>
  
  <p>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 </p>
  
  <pre><code>perspective: 2000px;
  </code></pre>
  
  <p>to</p>
  
  <pre><code>transform: perspective(2000px);
  </code></pre>
  
  <p>My question is: is something wrong with our existing declaration (using the perspectice property) or is this a bug in google chrome?</p>
  
  <p>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.</p>
  
  <p>Any thoughts?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
  &lt;div class="perspective-Parent"&gt;
    &lt;div class="page"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>