css - cssで画像を円/円弧にワープする

Question

長方形の画像を円または円弧にワープ/変形する信頼できる CSS の方法はありますか?

ストレッチなどはわかるのですが、シェイプデフォルメを施すのは無理そうです。これは正しいですか..？多分SVG変換..？理想的には、遷移可能な変換です。

• フラットな形状をシミュレートするために境界半径を使用することについてではなく、画像の実際の変形について話します。

Answer 1

No, this is not possible yet because only linear transformations are supported by CSS.

However, the answer to this similar question has an example using experimental filters from Adobe to create a sucking effect: How to use CSS 3d matrix to create a curved deformation effect

Answer 2

四角形はいつ、どのように変形しますか? それが:hover状態である場合、必要なのは次のとおりです。

HTML

<img src="#" class="img-circle" />

CSS

.img-circle:hover {
    border-radius: 50%;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

以下に例を示します: http://jsfiddle.net/YcacT/

Answer 3

これは必要ですか？

.circle {
  border-radius: 50%;
}

http://jsfiddle.net/6AHTb/

border-radius プロパティは、IE9 以降、Firefox 4 以降、Chrome、Safari 5 以降、Opera でサポートされています。