如何使用CSS 3d矩阵创建弯曲变形效果 [英] How to use CSS 3d matrix to create a curved deformation effect

问题描述

我试图使用css3 -webkit-transform：matrix3d（）属性复制ios中的吸吮效果。

但是，我无法像图片中那样管理曲线边缘。我自己最近的解决方案如下：

  -webkit-transform：matrix3d（0.85，0.0678，0，0， 0.85，-1.36，-0.0019,0,0，-1.53​​，-3.73,0,0,0.34,1）; 
  

这里是

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.

解决方案

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

这篇关于如何使用CSS 3d矩阵创建弯曲变形效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！