矩阵3D变换获得梯形？ [英] Matrix 3d transform for obtaining trapezoid?

问题描述

我尽量模拟转一转背效果，作为两个门打开同步备份。我尝试了不同的矩阵发电机来获得需要的梯形，但我没有任何运气。我知道我必须从0到180度的动画和rotateY保持我的转换原点但梯形杀死我。

I try to simulate a turn to back effect, as two doors open to back simultaneously. I tried different matrix generators to obtain that trapezoid needed but i didn't have any luck. I know i have to animate an rotateY from 0 to 180 degrees and to keep my transform origin but that trapezoid kills me.

推荐答案

如何使用透视？

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

这篇关于矩阵3D变换获得梯形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！