Cita:
Iniciado por Shiryu_Libra 
amigo derkenuke, no refleja
Sí, eso es por lo que me pasó antes, que la barra de división en la función
color() no sale como es.
Lo he probado con imagenes, pero no es lo mismo. Se tiene que hacer con una imagen frontal, porque si utilizamos una imagen que contenga un punto de fuga, ya la cosa cambia. Eso es por la teoria de reflexiones, no sé si sabréis algo de eso. Podéis ver cómo funciona en:
http://etc.usf.edu/clipart/4100/4145...ctive_2_lg.gif http://www.tpub.com/content/draftsma...4276_295_1.jpg
Como veis el reflejo fuga al mismo punto en el espacio, ya que las aristas del dibujo deben ser paralelas en el reflejo y en la realidad. Cosa que no pasa con el programita este:
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(enves,reves){
var contRefl = "";
var objOrig = document.getElementById(enves);
var alto = parseInt(objOrig.offsetHeight);
var contOrig = objOrig.innerHTML;
var capas = alto;
for(var c=0, op=0.75, opp; c<capas; c++, op-=0.75/capas ){
opp=parseInt(op*100);
contRefl += "<div style='position:absolute; top:"+c+"px; height:1px;'><div style='margin-top:"+(c+1-alto)+"px; filter: alpha(opacity="+opp+"); -moz-opacity: "+op+";'>"+ contOrig +"</div></div>";
}
document.getElementById(reves).style.height = alto +"px";
document.getElementById(reves).innerHTML = contRefl;
}
onload = Function("voltear1('enves','reves'); voltear1('enves2','reves2'); "); // voltear2();
//onresize = Function("voltear2();");
// http://www.ubuntu-es.org/files/pictures/picture-7917.gif
</script>
<style type="text/css">
#enves , #reves, #enves2, #reves2 {
position:relative;
font-weight:900;
font-size:70px;
font-family:"arial black";
color:#000000;
margin-bottom:-44px;
}
#enves2, #reves2 {
margin-bottom:0px;
top:-100px;
left:500px;
}
#reves div, #reves2 div {
overflow:hidden;
}
</style>
</head>
<body>
<h2>Reflejo vertical de imagen. (IE, FF)</h2>
<div id="enves"><img src="http://www.bocamina.com/images/noticias/mibladem/1.jpg" width="394" height="263" /></div>
<div id="reves"></div>
<div id="enves2"><img src="http://www.ubuntu-es.org/files/pictures/picture-7917.gif" width="43" height="48" /></div>
<div id="reves2"></div>
</body>
</html>
Así que sólo nos valdría para imágenes pequeñas, y que no fuguen, que no sean perspectivas o que sean frontales. Iconos y botoncitos más que nada.
Bueno, pues seguiremos con el tema.
Un saludo.