如何使用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的结果.

如何在图片中进行转换.请注意左右边缘是如何弯曲的.

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