Voltear una imagen vertical u horizontalmente es fácil : se usa un editor y se carga la imagen ya volteada.
El problema aparece en los textos.
Internet Explorer permite usar filtros para crear el efecto, que por supuesto no funcionan en otro navegador.
Aquí dejo un método que puede ser útil en algunos casos y siempre que el texto no sea muy grande.
Código:
<!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 voltear1(){
var contRefl = "";
var objOrig = document.getElementById( "enves" );
var alto = parseInt(objOrig.offsetHeight);
var contOrig = objOrig.innerHTML;
var capas = alto;
for(c=0; c<capas; c++){
contRefl += "<div style='position:absolute; top:"+c+"px; height:1px; border-collapse:collapse'><div unselectable='on' style='margin-top:"+((alto*-1)+1+c)+"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">
body {color:#ffffff; background-color:#000000; }
#enves , #reves {position:relative; font-weight:900; font-size:46px; font-family:sans-serif; color:#000000; background-color:#ffffff; margin-bottom:20px;}
#reves div {-moz-user-select:none; cursor:not-allowed; overflow:hidden; border-collapse:collapse;}
</style>
</head>
<body>
<h2>Reflejo vertical de texto. (IE, FF)</h2>
<div id="enves">_QWERTYUIOP </div>
<div id="reves"></div>
</body>
</html>
Está probado en
FF2 y en
Opera9.2 (al igual que los que puse más abajo), pero también anda en
IE. Claro que ahí no se justifica usarlo, porque un filtro es más eficiente.