Question

TL; DR：是否可以通过perspective-origin直接为透视提供元素设置消失点（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-origin转换的元素上设置perspective-transform，如第二个示例所示：

<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的角色。

是否可以在使用transform：perspective（）转换的元素上设置perspective-origin？

1 个答案: