波の効果のようにイメージを歪める方法はありますか？

Question

私は「波」の蒸気が上がっているコーヒーを飲みました。歪みのあるCSSの方法があるかどうか疑問に思っています。そのため、ぼやけた波のように見えます（Fata Morganaなど）。

私はカップのコピーをアップロードしました。そしてhereは私の蒸気です。

Answer 1

現実の蒸気は、実際にそのように動作しません。静的なイメージから抜け出すことは（少なくとも私のために）不可能になる多くの流れとランダム性があります。

しかし、いくらかのスキューとフェーディングでおおよその効果が得られると思います。これを行うには、CSSアニメーションを使用することができます。

@keyframes steam { 
    0%, 100% { 
     transform: skewX(0deg); 
     opacity: 1;   
    } 
    25% { transform: skewX(10deg); opacity: .8; } 
    75% { transform: skewX(-10deg); opacity: .8; } 
} 

http://jsfiddle.net/ExplosionPIlls/wxfg5/1/

これは前後にゆがみや不透明度をアニメーション化し、それはとてもランダムではありません。もちろん、より多くのフレームをアニメーションに追加して、一見無作為な外観にするか、パターンを追従しにくくすることができます。

リアル蒸気がよりランダムに移動します。あなたは完全なJSを行かなければならないので、あなたは、（私の知っていること）のみCSSでそのようにランダム性を行うことはできません。

var frameTime = 200; 

var transition = 'all ' + (frameTime/1000) + 's linear'; 
img.style.WebkitTransition = transition; 
img.style.transition = transition; 

setInterval(function() { 
    var skew = Math.round(Math.random() * 10) * (Math.random() < 0.5 ? -1 : 1); 
    skew = 'skewX(' + skew + 'deg)'; 
    img.style.transform = skew; 
    img.style.WebkitTransform = skew; 
}, frameTime); 

をする必要があります（有効である）などskewYとして斜行不透明度の変更またはその他の追加します上記のフレームワークではかなり些細なことです。