整个div的反射

【问题标题】：Reflection of whole div整个div的反射
【发布时间】：2013-08-21 22:51:08
【问题描述】：

我有一个div，我想给它添加一个反射效果。

我知道有很多关于向图像添加反射的教程（例如 this 和 this），但我没有找到任何关于反射整个 div 的内容。

CSS3 可以吗？那么jQuery呢？如何？

EDIT
This 是我根据第一个教程尝试的。另外，如果我使用这种方法，用户将不得不下载两次反射的内容，这不好......

【问题讨论】：

看到第一个链接状态使用 css3 创建反射，即使代码显示了它是如何完成的，我会说是的，这在 CSS3 中是可能的。您是否尝试过实施该示例？
我试过了，但是文字没有反映。我会在 jsfiddle 中再试一次
你能发布相关的 html/css 甚至是小提琴吗？那么处理它可能会更容易。此外，据我所知，样本是反射图像，不确定它是否能以同样的方式处理纯文本。

标签： jquery css

【解决方案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/

【讨论】：

如果你将它与一些 jQuery 结合并添加一些不透明度，这真的可以工作
以及如何添加一些渐变？（像这样：designshack.net/wp-content/uploads/wkreflections-10.jpg）
我已经修改了你的代码，现在看起来更好了，用户也不必两次下载内容：jsfiddle.net/UMEdU/2，但我仍然不知道如何添加渐变...
@MahdiGhiasi 也许this 会有所帮助。