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

In our application we use a temporary css transform as a page transition.

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

With the latest build of google chrome (37) this stopped working. The transformation has no longer a perspective.

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

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;

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?

我的问题是:我们现有的声明是否有问题(使用perspectice属性)还是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>

4 个解决方案

#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:

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>

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.

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

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

您确实可以对父元素进行透视变换。为此,您需要设置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>

When I test out different perspectives in chrome, the perspective property gives some strange distortions.

当我在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 />

#3

To activate 3D space, an element needs perspective. This can be applied in two ways: using the transform property, with the perspective as a functional notation.

要激活3D空间,元素需要透视。这可以通过两种方式应用:使用transform属性,将透视作为功能表示法。

transform: perspective( 600px );

or using the perspective property:

或使用perspective属性:

perspective: 600px;

Perspective Projection vs. Perspective Transformation

透视投影与透视转换

Perspective Projection calculates the perspective view (i.e., foreshortening) of a 3D object onto a 2D projection plane. The effect of viewing in perspective is achieved, and, of course, the z-values (depth information) are discarded in the process.

透视投影计算3D对象在2D投影平面上的透视图(即,透视图)。实现了在视角中观看的效果,当然,在该过程中丢弃了z值(深度信息)。

Perspective Transformation allows us to see how the perspectively foreshortened and projected polygons will overlap, without discarding the z-values (which we need to use later for depth comparison).

透视变换允许我们看到透视缩小和投影的多边形将如何重叠,而不丢弃z值(我们稍后需要使用它进行深度比较)。

#4

The order matters in case of declaring the property and the function, the "perspective" function must come right after the "transform" property!

在声明属性和功能的情况下,顺序很重要,“透视”功能必须在“转换”属性之后!

WRONG CODE

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

CORRECT CODE

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

#1