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の結果です。
写真のように変換するにはどうすればよいですか。右端と左端がどのように湾曲しているかに注意してください。
css3 変換についていくつか検索しました。プロパティを使用している場合はmatrix3d、何もカーブさせない線形変換のみを行うことができます。これには、せん断、スケール、平行移動が含まれます。
ただし、現在の実験的なテクノロジでは、非線形変換が可能です。したがって、どんなオブジェクトでもワープ、カールなどを行うことができます。これにはシェーダーを記述する必要があるため、GPU 用にコーディングする必要があります。
アドビには、これを実証するための 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