css33d画梯形,CSS3 matrix3d矩形到梯形转换

我想使用webkit对CSS3 transform: matrix3d()的支持来创建“下降卡”效果。 (对于这个输出的唯一目标是铬)CSS3 matrix3d矩形到梯形转换

最终的效果应通过下面的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是简单的测试：

this div should fall forward...

上面的matrix3d基于读取this SO question，但它会产生一个缩小的正方形，它会围绕由初始框底部定义的x轴进行翻转。

我明白，CSS 2d矩阵只能通过变换一个盒子来产生矩形和平行四边形，而不规则形状需要矩阵3d变换操作(this有助于刷新我的衰落线性代数！)，但我似乎只能产生矩形和平行四边形。

我环顾了一些标有matrix和transformation的SO问题。他们中的大多数不是基于CSS的，我无法获得我想要的转换。

2011-02-10

beggs

+2

我创建了CSS变换值摆弄的工具在这里：http://www.duopixel.com/ stack/webkitmatrix /，但恐怕我无法用Chrome制作梯形图。试一试。 –

2011-02-10 14:00:13

+0

@Duopixel：这是一个很棒的工具。我可以在Safari中制作一个梯形...但通过移动Row-1，Column4滑块(右上滑块)在Y轴上倾斜而不是在X轴上。在同一个滑块创建平行四边形的Chrome中。我的理解是，我应该移动Row-4，Column-3滑块来创建X轴平行四边形，但它在Safari或Chrome中不起作用。 –

2011-02-11 06:02:25

+0

这[CoffeeScript小提琴](http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/#cp_embed_ifnqH)可能会有用。它嵌入的博客页面也有一些有用的解释。 –

2015-10-20 19:20:34