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

Question

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

使用最新版本的 google chrome (37)，这停止了工作。转型不再有前景。

摆弄开发人员工具，我能够通过从

更改父元素的透视定义来恢复正确的行为

perspective: 2000px;

到

transform: perspective(2000px);

我的问题是：我们现有的声明有问题（使用 perspectice 属性）还是 google chrome 中的错误？

我试图重现下面的问题，但在简化的示例中，我看到了相反的效果，现在透视有效，而 transform:perspective 无效。

有什么想法吗？

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

请注意此示例中的三个“页面”各有自己的视角。

---

现在这一切都已经过去了......

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

Answer 2

此处接受的答案不正确。

您确实可以对父元素进行透视变换。为此，您需要设置 transform-style: preserve-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:rotateX(45deg) perspective(100px);

正确的代码

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

Answer 4

要激活 3D 空间，元素需要透视。这可以通过两种方式应用：使用 transform 属性，将透视图作为函数符号。

transform: perspective( 600px );

或使用透视属性：

perspective: 600px;

Perspective Projection vs. Perspective Transformation

透视投影计算 3D 对象在 2D 投影平面上的透视图（即透视缩短）。效果 实现了透视观察，当然，z 值 （深度信息）在此过程中被丢弃。

透视变换让我们可以看到透视缩短和投影的多边形将如何重叠，而不会丢弃 z 值（我们需要稍后用于深度比较）。