css - 四隅のcss3で画像を歪ませる

Question

楽しく学べる1品です。CSS3でもフラッシュと同じ効果が欲しいです。http://www.rubenswieringa.com/code/as3/flex/DistortImage/

インターネットの例を見ると、傾斜または回転しか見つかりませんでした。オプションでコーナー画像の歪み画像が欲しいです。

Answer 1

それを行うのは簡単ではありませんが、少なくとも 3 つのオプションがあります。それは難しく、ここに収まるよりもはるかに長いので、私はそれらをハウツーでバックアップしていません. （さらに、ライブラリに出くわすことなく何時間もかかるでしょう）

1. を使用しcanvasます。画像をビットに分割し、適切な場所に描画します。何をしているかに応じて、2D または 3D (WebGL) コンテキストを使用できます。

2. CSS 3D 変換を使用します。多くの div を作成し、画像をオフセット付きの背景画像に設定して、1 つの画像のように見せます。必要な効果が得られるように、3D 変換を使用してそれらを配置します。

3. カスタム シェーダーを使用します (超新しいブラウザーのみ)。http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/には、同様の例がいくつかあります。

要するに、単純な方法はまったくありません。