css - 是否可以在使用转换 : perspective()? 转换的元素上设置透视原点

Question

TL;DR: 是否可以为直接通过 transform: perspective( )，而不是通过 perspective: 从父级继承它？

您可以在 http://jsbin.com/fevik/2/edit 查看示例.在第二组元素中，我希望每个元素都有自己可以指定的消失点。

讨论:

为由其父元素进行 3D 定位的元素设置消失点 (perspective-origin) 很容易。假设我在一个容器中有两个 div:

<div id="cont1" class="cont">
    <div id="a" class="box"></div>
    <div id="b" class="box"></div>
</div>

然后，我可以为他们提供视角和一个共同的消失点:

#cont1 {
    -webkit-perspective: 400;
    -webkit-perspective-origin: 100% 100%;
}

#cont1 .box {
    -webkit-transform: rotateX(-35deg);
}

您可以在 http://jsbin.com/fevik/2/edit 的第一组转换元素中看到结果.

但是，是否可以在使用 perspective-transform 转换的元素上设置 perspective-origin，如第二个示例:

<div id="cont2" class="cont">
    <div id="c" class="box"></div>
    <div id="d" class="box"></div>
</div>


#cont2 .box {
    -webkit-transform: perspective(400) rotateX(-35deg);
}

我找不到方法。不管怎样，第二个例子中的元素的消失点就在它们后面的中间。

Answer 1

似乎通过 transition 设置了透视图，transition-origin 扮演了 perspective-origin 的 Angular 色。