三维变换，逆变换不对称

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，你会发现左手角度是关闭的。我不知道如何解决这个问题，使其全部平衡并且对称。

Chrome平台显示不正确，如Chrome中此检查中所示：

有人可以帮我指导这种对称吗？

Answer 1

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

尝试：

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

并将解决它。

更好的方法是让左右两侧都有你看到的尺寸（它们在右边更大）。

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