css - 用于获得梯形的矩阵 3d 变换？

Question

我尝试模拟向后转的效果，因为两扇门同时向后打开。我尝试了不同的矩阵生成器来获得所需的梯形，但我没有任何运气。我知道我必须为 rotateY 从 0 度到 180 度设置动画并保持我的变换原点，但那个梯形让我受不了。

Answer 1

如何使用透视？

demo

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