Reflection of whole div

Question

I have a div and I want to add a reflection effect to it.

I know there are lots of tutorials for adding reflection to an image (like this and this), but I didn't find anything about reflecting whole div.

Is it possible with CSS3? And what about jQuery? How?

EDIT
This is what I tried according to the first tutorial. Also, If I use this method, user will have to download the reflected content twice, which is not good...

Answer 1

Try using CSS3's transform property with scaleY(-1):

CSS:

div.reflection
{
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}

HTML:

<div>
    blah
</div>
<div class="reflection">
    blah
</div>

http://jsfiddle.net/UMEdU/1/