我正在尝试使用 webkit 对 CSS3 的支持transform: 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, 0, 0.5);
}
@-webkit-keyframes flip-card {
0% {-webkit-transform: ;}
100% {-webkit-transform:
matrix3d(1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 0, 0,
0, 0, 0.001, 1);}
}
HTML 很容易测试：
<body>
<div id="test">this div should fall forward...</div>
</body>
上面的matrix3d是基于阅读这个问题 https://stackoverflow.com/questions/2484071/how-do-i-compete-the-transformation-matrix-needed-to-transform-a-rectangle-into-a，但它会生成一个缩小的正方形，该正方形围绕初始框底部定义的 x 轴翻转。
据我所知，CSS 2d 矩阵只能通过盒子的变换来生成矩形和平行四边形，并且不规则形状需要矩阵3d 变换操作（this http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/对刷新我逐渐衰退的线性代数很有帮助！），但我似乎只能生成矩形和平行四边形。
我环顾了一些带有标签的问题matrix and transformation。他们中的大多数都不是基于 CSS 的，我无法获得我想要的转换。
