Wie man CSS 3d Matrix verwendet, um einen gekrümmten Deformationseffekt zu erzeugen - css3, css-Übergänge

Ich versuche, den Saugeffekt in ios mit css3 zu replizieren -webkit-transform:matrix3d() Eigentum.

Ich kann die gekrümmten Kanten jedoch nicht wie auf dem Bild verwalten. Die nächste Lösung für mich ist folgende:

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

Hier ist das jsfiddle Ergebnis.

Wie kann ich die Transformation wie auf dem Bild machen? Beachten Sie, dass die rechten und linken Kanten gekrümmt sind.

Antworten:

Ich habe etwas über css3-Transformationen gesucht. Wenn Sie verwenden matrix3d In dieser Eigenschaft können Sie nur lineare Transformationen durchführen, bei denen Sie nichts krümmen können. Dazu gehören Scherung, Skalierung und Übersetzungen.

Eine aktuelle experimentelle Technologie ermöglicht jedoch nichtlineare Transformationen. Daher können Sie jedes Objekt verziehen, kräuseln usw. Es müssen Shader geschrieben werden, damit Sie für GPU codieren können.

Adobe hat ein CSS-Filterlabor, um dies zu demonstrieren. Dank ihnen gelang es mir, die gewünschte Transformation anzuwenden. Hier ist der Screenshot:

Und hier ist der Code, um das zu schaffen

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

Sie können es selbst testen, nachdem Sie experimentelle Funktionen mit diesem Link aktiviert haben: http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/#suckeffect