矩阵三维变换如何获得梯形？

Question

我试图模拟一种向后翻转的效果，就像两扇门同时向后打开。我尝试了不同的矩阵生成器来获得所需的梯形形状，但没有成功。我知道我必须从0度旋转到180度并保持变换原点来进行rotateY动画，但那个梯形形状让我很头痛。

- Dan Ovidiu Boncut

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

- Ana

---

这并不是一个梯形。 - Ilan Biala

这里的代码可以实现。但是我有点晕，忘记保存演示的最新版本了。现在已经修复了。在Chrome、Firefox、IE10和Safari中测试并且可以运行（Opera不支持3D变换）。 - Ana

非常有趣。看起来让这个工作起来的关键是给被转换的div的父元素分配透视。 - zakdances