如何使用CSS 3D矩阵创建曲线变形效果

Question

我试图使用CSS3的-webkit-transform:matrix3d()属性来复制iOS中的吸入效果。然而，我无法像图片中那样处理曲边。我自己找到的最接近的解决方案如下：

-webkit-transform: matrix3d(0.85, 0.0678, 0, 0, 2.37, 0.85, -1.36, -0.0019, 0, 0, -1.53, -3.73, 0, 0, 0.34, 1);

这是jsfiddle的结果。

我应该如何像图片中一样进行变换。请注意右侧和左侧边缘是如何弯曲的。

- Cihad Turhan

Answer 1

我做了一些关于CSS3变换的搜索。如果使用matrix3d属性，您只能进行线性变换，这不允许您弯曲任何东西。它包括剪切、缩放和平移。

然而，当前的实验技术使您能够进行非线性变换。因此，您可以扭曲、卷曲等任何对象。这需要编写着色器，因此您需要为GPU编码。

Adobe有CSS过滤器实验室来演示这一点。感谢他们，我成功地应用了我想要的变换。这是屏幕截图： 这是管理此操作的代码。

-webkit-filter:
custom(url(shaders/vertex/warp.vs) mix(url(shaders/fragment/warp.fs) normal source-atop), 20 20 border-box, k array(-0.429, -0.471, 467, -0.286, -0.507, 0, -0.086, -0.507, 0, 0.15, -0.514, 0, -0.407, -0.086, 0, -0.021, -0.171, 0, 0.193, -0.171, 0, 0.364, -0.171, 0, 0.036, 0.179, 0, 0.179, 0.171, 0, 0.35, 0.179, 0, 0.464, 0.171, 0, 0.2, 0.5, 0, 0.279, 0.5, 0, 0.414, 0.493, 0, 0.5, 0.5, 0), matrix perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), useColoredBack 1, backColor 1 1 1 1);

你可以通过启用实验性功能并使用此链接进行测试：http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/#suckeffect。

- Cihad Turhan

---

四年后，这项技术的现状如何？ - Erik Kaplun

据我所知，该项目已被放弃，但您可以在GitHub上找到源代码。 - Cihad Turhan