How to use a CSS 3D Matrix to create a curved warp effect
I am trying to replicate the sucking effect in ios using a css3 property -webkit-transform:matrix3d()
.
However, I cannot control the curved edges like in the picture. The closest solution is this:
-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 conversion like in the picture. Note that the right and left edges are curved.
source to share
I did some searches about css3 transforms. If you use a property matrix3d
, you can only do linear transformations, which don't allow you to bend anything. It includes shift, scale and translations.
However, modern experimental technology allows you non-linear transformations. Therefore, you can deform, twist, etc. Any object. This is required for writing shaders, so you need to encode the GPU.
Adobe has a CSS Filter lab to demonstrate this. Thanks to them, I was able to apply the transform that I wanted. Here's a 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 check it out yourself after enabling experimental features using this link: http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/#suckeffect
source to share