如何使用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編寫代碼。

Adob​​e有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