CSS中透视图和transform透视图属性的区别是什么？

Question

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

随着最新版本的谷歌铬(37)，这是停止工作。这种转变已不再是一种视角。

通过修改父元素上透视图的定义，我能够恢复正确的行为。

perspective: 2000px;

至

transform: perspective(2000px);

我的问题是:我们现有的声明(使用perspec格属性)有什么问题吗?还是这是google chrome中的一个bug？

我试图在下面重新创建这个问题，但在简化的示例中，我看到了相反的效果，即透视图现在起作用并进行转换:透视图无效。

有什么想法吗？

​

.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

我对透视和transform透视图的基本理解是，普通透视图属性通常用于父元素，为多个子元素提供相同的透视图，而transform透视图则用于子元素或单个元素，为其提供自己的透视图。

当您将这些效果应用于多个元素时，这是最容易看到的：

父元素上的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>

​

请注意，在这个示例中，三个“页面”各有其各自的透视图。

现在这一切都不可能了..。

这两种方法都是不正确的，它们只是提供不同的视觉效果，只需选择一个你喜欢的。

Answer 2

这里接受的答案是不正确的。

您确实可以对父元素进行透视图转换。要使其工作，您需要在父服务器上设置transform样式:保存-3d；。

​

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

​

当我在chrome中测试不同的透视图时，透视图属性会产生一些奇怪的扭曲。

​

.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

在声明属性和函数时，顺序很重要，“透视”函数必须紧跟在"transform“属性之后！

错误代码

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

正确码

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