获取梯形的矩阵3d变换？

Posted 2023-03-06

【中文标题】获取梯形的矩阵3d变换？

【英文标题】：Matrix 3d transform for obtaining trapezoid?

【发布时间】：2013-01-06 23:15:47

【问题描述】：

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

【参考方案1】：

用perspective怎么样？

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

【讨论】：

这不是梯形

这里的代码可以。但是让我头晕目眩，忘了保存演示的最后一个版本。现在修好了。在 Chrome、Firefox、IE10、Safari 中测试和工作（Opera 不支持 3D 转换）。

非常有趣。似乎让它工作的关键是为转换后的 div 的父级分配一个透视图......