Is there a way to distort an image to look like a wave effect? [closed]

Question

I have a cup of coffee with 'wave' steam going up and I wonder if there is a (preferred) CSS way to distortion so it would look like a wave with some blur, something like a Fata Morgana effect.

I uploaded a copy of my cup. And here is my steam.

Answer 1

Real life steam doesn't really work that way. There's a lot of flowing and randomness that would be impossible (at least for me) to get out of a static image.

Nevertheless, I think an approximate effect can be achieved with some skewing and fading. You can use CSS animations to do this:

@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/

This animates the skewing and opacity back and forth, so it's not so random. You can of course add more frames to the animation to give it a seemingly random look or make the pattern harder to follow.

Real steam moves more randomly. You can't do randomness like that with CSS alone (that I know of), so you have to go full JS:

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

Adding opacity changes or other skewing such as skewY (which may be effective) should be fairly trivial with the above framework.

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