我已经对 css3 转换进行了一些搜索。如果您正在使用matrix3d
属性,你只能进行线性变换,这不允许你弯曲任何东西。它包括剪切、缩放和平移。
然而,当前的实验技术允许您进行非线性变换。因此,您可以扭曲、卷曲等任何物体。这需要编写着色器,因此您需要为 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:
![suckeffect](https://i.stack.imgur.com/zs1iZ.png)
这是管理这个的代码
-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 http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/#suckeffect