css3 matrix 曲线变换,CSS3 matrix3d矩形到梯形变换

我正在尝试使用webkit对

CSS3转换的支持：matrix3d(< matrix>)来创建“下降卡”效果. (输出的唯一目标是Chrome)

最终效果应该通过以下4个阶段过渡,最终只是一条水平线：

这是我现在拥有的CSS：

#test {

margin: auto auto;

height: 200px;

width: 200px;

border:1px solid black;

background-color: lightblue;

-webkit-perspective: 1000;

-webkit-transform-origin: 50% 100%;

-webkit-transform-style: preserve-3d;

-webkit-animation-name: flip-card;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

-webkit-Box-shadow: 0px 5px 20px rgba(0,0.5);

}

@-webkit-keyframes flip-card {

0% {-webkit-transform: ;}

100% {-webkit-transform:

matrix3d(1,1,0.001,1);}

}

HTML很容易测试：

this div should fall forward...

上面的matrix3d基于读取this SO question,但是它产生了一个收缩的正方形,它围绕由初始框底部定义的x轴翻转.

据我所知,CSS 2d矩阵只能通过变换一个盒子来生成矩形和平行四边形,并且不规则形状需要matrix3d变换操作(this有助于刷新我的衰落线性代数！),但我似乎只能生成矩形和平行四边形.

我查看了一些用矩阵和转换标记的SO问题.他们中的大多数都不是基于CSS的,我无法得到我想要的转换.