Ну, вот моя попытка. Всё свелось к аналогии с box-shadow: клонировали элемент, и добавили копии эффектов. Эффекты такие: поворот (на 180 градусов), ревёрсинг (отражение справа налево), и размытие. Последнее достигается сложновато в опере и файрфоксе.
Я разделю пример на несколько, чтобы было удобней
писать читать код.
Начну с классического вида элемента, без отражения.
<style>
* {margin:0;padding:0}
.mirrorize {
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
border: 2px red solid;
padding: 5px;
background-color: #F58C8C;
position: absolute;
top: 0;
}
</style>
<div class="mirrorize">
Mirrorize me.
</div>
БЫЛО БЫ НЕПЛОХО ДОБАВИТЬ ОТРАЖЕНИЮ USER-SELECT: NONE. Но я последую принципу "работает - не трожь" (мне просто лень 
).
А теперь начну мешать сюда грязный код. Пример для браузеров, поддерживающих CSS Filters (у меня только хром):
<style>
* {margin:0;padding:0}
.mirrorize {
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
border: 2px red solid;
padding: 5px;
background-color: #F58C8C;
position: absolute;
top: 0;
}
.reflection {
position: absolute;
width: 100%;
left: 0;
padding: 0;
margin: 0;
top: 105%; /* outer высота + отступ */
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}
</style>
<div class="mirrorize">
Mirrorize me.
<div class="reflection mirrorize">Mirrorize me.</div>
</div>
Теперь решение для IE:
<style>
* {margin:0;padding:0}
.mirrorize {
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
border: 2px red solid;
padding: 5px;
background-color: #F58C8C;
position: absolute;
top: 0;
}
.reflection {
position: absolute;
width: 100%;
left: 0;
padding: 0;
margin: 0;
top: 105%;
/*IE 5.5 - IE 7*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1) progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
/*IE8 вроде как.*/
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1) progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)";
}
</style>
<div class="mirrorize">
Mirrorize me.
<div class="reflection mirrorize">Mirrorize me.</div>
</div>
Ну а теперь решение для браузеров, поддерживающих CSS Transformations, но не поддерживающих CSS Filters - т.е. размытие. На ум мне пришло SVG.
В ОПЕРЕ НЕ РАБОТАЕТ. ЖАЛЬ. Можно было бы сделать размытие в канвасе (слыхал про такое), но я канвас ни разу не трогал, и в ближайшее время даже не собираюсь.
<style>
* {margin:0;padding:0}
.mirrorize {
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
border: 2px red solid;
padding: 5px;
background-color: #F58C8C;
position: absolute;
top: 0;
}
.reflection {
position: absolute;
width: 100%;
left: 0;
padding: 0;
margin: 0;
top: 105%;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: url(#reflection_blur);
}
</style>
<svg>
<defs>
<filter id="reflection_blur">
<feGaussianBlur stdDeviation="2" />
</filter>
</defs>
</svg>
<div class="mirrorize">
Mirrorize me.
<div class="reflection mirrorize">Mirrorize me.</div>
</div>
