在CSS中透视和变换的透视属性有什么区别？ [英] What is the difference between perspective and transform's perspective properties in CSS?

问题描述

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

使用最新版本的google chrome（37）

使用开发人员工具，我能够通过更改父元素上透视的定义来恢复正确的行为，从

p>

  perspective：2000px; 
  

到

  transform：perspective（2000px）; 
  

我的问题是：我们现有的声明（使用透视属性）

我试图在下面重现这个问题，但是在缩小的例子中，我看到了相反的效果，现在的透视效果和转换：透视不。 / p>

任何想法？

  .perspective-Parent {/ *  -  moz-transform：透视（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;透视：2000px; -moz-perspective-origin：50％50％; -ms-perspective-origin：50％50％; -webkit-perspective-origin：50％50％;透视原点：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& class =perspective-Parent> < div class =page> < / div>< / div>  

解决方案

我对透视vs变换透视的基本理解只是简单透视属性是你通常在父元素上使用以给多个孩子相同的透视，而变换透视将用于子元素，

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

透视：; 在父元素上：

 。透视 - 父{-moz-perspective：2000px; -ms-perspective：2000px; -webkit-perspective：2000px;透视：2000px; -moz-perspective-origin：50％50％; -ms-perspective-origin：50％50％; -webkit-perspective-origin：50％50％;透视原点：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： lang =jsdata-hide =false>

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

请注意，在这个例子中，这三个页面都有自己的视角。

---

这是所有的方式...

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

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

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

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;

to

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?

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>

解决方案

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:

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

这篇关于在CSS中透视和变换的透视属性有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！