Css 三维变换，反变换非对称

我有两个容器，每个容器都包含一个嵌套的div结构，并对其应用了三维变换。效果是模拟一张纸沿中心线展开

您可以看到代码的当前状态

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

通过使用

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>

transform3d（）

然后根据每个段的容器，将每个段的99px放置在右侧或99px放置在左侧

如果看到，您会注意到左侧部分的角度已关闭。我不知道如何修复这一切，使其均匀和对称

3d平面不正确，如本次检查中所示，镀铬：

---

有人能帮我把这个对称吗？

两边是对称的，不是你的观点

尝试：

并将解决它

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

---

这将使透视点在默认情况下（中心）也是对称的，并且不需要将其设置为任意值。谢谢@vals。看起来好多了。

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

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