How to use CSS 3d matrix to create a curved deformation effect

Question

I'm trying to replicate sucking effect in ios using css3 -webkit-transform:matrix3d() property.

However, I can't manage the curved edges like in the picture. The closest solution by myself is the following:

-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);

Here is the jsfiddle result.

How can I do the transformation like in the picture. Note that how right and left edges are curved.

Answer 1

I've made some search about css3 transformations. If you're using matrix3d property, you can only make linear transformations which doesn't let you curve anything. It includes shear, scale and translations.

However, a current experimental technology lets you non-linear transformations. Therefore, you can warp, curl etc any object. This needs to write shaders so you need to code for GPU.

Adobe has CSS Filter lab to demonstrate this. Thanks to them, I managed to apply the transformation I wanted to. Here is the screenshot:

And here is the code to manage this

-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);

You can test it yourself after enabling experimental features with this link: http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/#suckeffect