CSS Image Flip (Webkit/Trident)

CSS Image Flip demo using proprietary vendor extensions for Webkit and Trident engines.

by J. Albert Bowden

HTML

<!DOCTYPE html>
<html>
  <head>
      <title>Image Flip (Webkit/Trident)</title>
    </head>
    <body>
        <img class="imageflip" src="http://bowdenweb.com/i/stock/nerd-glasses.jpg" />
        <img class="imageflip2" src="http://bowdenweb.com/i/stock/nerd-glasses.jpg" />
    </body>
</html>

CSS

.imageflip{margin:20px auto; display:block;
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
-webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px; border-radius:3px; border:3px solid #666;
-ms-filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0, xray=0, mirror=0, invert=0, opacity=1, rotation=2); 
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0, xray=0, mirror=0, invert=0, opacity=1, rotation=2)}
.imageflip2{margin:40px auto 20px auto; display:block;
    -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
-webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px; border-radius:3px; border:3px solid #666;
filter:flipv}