css - 台形を得るためのマトリックス3D変換?

Question

2 つのドアが同時に後ろ向きに開くので、後ろ向きの効果をシミュレートしようとします。必要な台形を取得するためにさまざまなマトリックスジェネレーターを試しましたが、運がありませんでした。回転 Y を 0 から 180 度までアニメートし、変換の原点を維持する必要があることはわかっていますが、その台形は私を殺します。

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