css - 3d变换，逆变换不对称

Question

我有两个容器，每个容器都包含一个嵌套的 div 结构，它们应用了 3d 变换。效果是模拟一张纸沿着中心线展开。

您会看到代码的当前状态 in this JSFiddle .

我遇到的问题是试图反转右边有左边的动画。

通过使用 translate3d() 放置每个起始段，我已经实现了我已经实现的目标。

HTML结构如下。

<div class="container">
    <div class="left">
        <div class="slice s1">
            <div class="slice s2"></div>
        </div>
    </div>

    <div class="right">
        <div class="slice s1">
            <div class="slice s2"></div>
        </div>
    </div>
</div>

.left 和 .right 元素绝对定位在 .container 内并设置为 left:50% 使它们居中。 .left 的第一个元素然后被赋予负值 left:-100px 以正确定位它。

.container {
    position:absolute;
    margin-left:-200px;
    left:50%;
}

.left, .right {
    width: 200px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    perspective: 500px;
    position: absolute;
}

.left {
    left: -100px;
}

.right {
    left:0;
}

transform3d() 然后将每个段放置在右侧 99px 或左侧 99px，具体取决于它们的容器。

如果您看到 JSFiddle ，您会注意到左侧部分的 Angular 不对。我不确定如何解决此问题以使其均匀且对称。

Chrome 中的检查显示 3d 平面不正确:

任何人都可以帮助指导我使其对称吗？

Answer 1

这两个方面是对称的，不是你的观点。

尝试:

.right {
    left:0;
    -webkit-perspective-origin: 0px 150px;
    perspective-origin: 0px 150px;
}

并将解决它。

更好的方法是让左侧和右侧具有您看到的大小(它们在右侧更大)。

这将使透视点默认(中心中心)也是对称的，并且不需要将其设置为任意值