Question

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

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

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

perspective: 2000px;

到

transform: perspective(2000px);

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

我尝试重新创建下面的问题，但在缩减示例中，我看到相反的效果，现在透视效果和变换：透视图不是。

有什么想法吗？

＆＃13;

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

＆＃13;

<p>
<div class="perspective-Parent">
  <div class="page">
  </div>
</div>

＆＃13;

Answer 1

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

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

父元素上的

perspective: ;：

＆＃13;

.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 */ 
}

＆＃13;

<div class="perspective-Parent">
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
</div>

＆＃13;

请注意所有三个＆＃34;页面＆＃34;在上面的例子中，从一个共同的角度来看。

关于各个要素的

transform: perspective();：

＆＃13;

.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 */ 
}

＆＃13;

<div class="perspective-Parent">
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
</div>

＆＃13;

注意这个例子中的三个＆＃34;页面＆＃34;每个人都有自己的观点。

现在已经完全不在了......

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

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中测试不同的视角时，perspective属性会产生一些奇怪的扭曲。

.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

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

transform: perspective( 600px );

或使用perspective属性：

perspective: 600px;

<强> Perspective Projection vs. Perspective Transformation

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

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

Answer 4

在宣布财产和职能的情况下，该命令很重要，＆＃34;透视＆＃34;功能必须在＆＃34;转换＆＃34;之后。属性！

错误的代码

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

正确代码

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

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

4 个答案: