整个div的反思

Question

我有一个div,我想为它添加一个反射效果.

我知道有很多教程可以为图像添加反射(比如这个和这个),但我没有找到任何关于反映整个div的内容.

CSS3有可能吗？那jQuery呢？怎么样？

编辑
这是我根据第一个教程尝试的.另外,如果我使用这种方法,用户必须两次下载反射内容,这是不好的...

Answer 1

尝试使用CSS3的transform属性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/