矩阵3D转换获得梯形？(Matrix 3d transform for obtaining trap

我尝试模拟转一转背的效果，作为两个敞开大门同时备份。 我尝试了不同的矩阵生成器来获得需要的梯形，但我没有任何运气。 我知道我必须从0度到180度的动画和旋转Y保持我的转换原点但梯形杀死我。

Answer 1:

如何使用perspective ？

演示

HTML：

<div class='doors'>
    <div class='door'></div><div class='door'></div>
</div>

相关CSS：

.doors { perspective: 35em; }
.door {
    display: inline-block;
    width: 50%; height: 100%;
    transition: 1s;
}
.doors:hover .door:first-child {
    transform-origin: 0 50% 0;
    transform: rotateY(60deg);
}
.doors:hover .door:last-child {
    transform-origin: 100% 50% 0;
    transform: rotateY(-60deg);
}

文章来源: Matrix 3d transform for obtaining trapezoid?