CSS中透视和变换的透视属性有什么区别？

Question

在我们的应用程序中,我们使用临时css转换作为页面转换.

随着最新版本的谷歌浏览器(37),这停止了工作.转型不再是一种观点.

摆弄开发人员工具我可以通过更改父元素的透视定义来恢复正确的行为

perspective: 2000px;

至

transform: perspective(2000px);

我的问题是:我们现有的声明有什么问题(使用perspectice属性)还是google chrome中的一个错误？

我尝试重新创建下面的问题,但在缩减的例子中,我看到相反的效果,现在透视工作和转换:透视不.

有什么想法吗？

.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

我对透视与变换视角的基本理解仅仅是普通透视属性是你通常在父元素上使用的属性,为多个子元素提供相同的透视图,而变换透视图则用于子元素或单个元素以赋予它自己的观点.

当您将这些效果应用于多个元素时,最容易看到这一点:

perspective: ; 在父元素上:

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

请注意,上面示例中的所有三个"页面"都是从一个共同的角度来看.

transform: perspective(); 关于个别元素:

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

请注意,在这个例子中,三个"页面"各自都有自己的视角.

现在这一切都不在了......

这两种方法都不正确,只是提供不同的视觉效果,只需选择您喜欢的效果.