Muy buen ejemplo. Siguiendo con las variables, y ahora que has dicho lo del efeco de agua se me ha ocurrido
ondear el reflejo...
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>REFLEJO.</title>
<script type="text/javascript">
function color(n) {
return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n % 16));
}
function voltear1(){
var contRefl = prueba = "";
var objOrig = document.getElementById( "enves" );
var alto = parseInt(objOrig.offsetHeight);
var contOrig = objOrig.innerHTML;
var capas = alto;
// si (capas/2) son dos circunferencias de radio r (720º=2*2*PI)
// c actual será x
// luego x será c*4*PI/(capas/2)
// el radio de la curvatura a elegir por el usuario
for(c=0, col=0, r=2.5; c<capas/2; c++, col+=255/(capas/2) ){
var ang = c*4*Math.PI/(capas/2);
var elCos = Math.sin(ang)*r;
var colHex ="#"+color(col)+color(col)+color(col);
contRefl += "<div style='position:absolute; top:"+c+"px; height:1px;'><div style='margin-top:"+(c+1-alto)+"px; color: "+colHex+"; margin-left:"+(elCos)+"px;'>"+ contOrig +"</div></div>";
}
document.getElementById("reves").style.height = alto +"px";
document.getElementById("reves").innerHTML = contRefl;
}
onload = voltear1;
onresize = voltear1;
</script>
<style type="text/css">
#enves , #reves {
position:relative;
font-weight:900;
font-size:70px;
font-family:"arial black";
color:#000000;
margin-bottom:-44px;
}
#reves div {
overflow:hidden;
}
</style>
</head>
<body>
<h2>Reflejo vertical de texto. (IE, FF)</h2>
<div id="enves"> derkeNuke </div>
<div id="reves"></div>
</body>
</html>
¿cuánto juego da esto no? jeje