Y aquí tenemos otra forma de
flipV Cómo logar un efecto espejo con javascript?
Es para imágenes, aunque yo sigo insistiendo en que para voltear una foto lo mejor es editarla. El problema sigue siendo el texto.
La siguiente versión también usa
canvas con
transform para la familia
Mozilla y filtros con
matrix para
IE y la familia
webkit.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head>
<title>EFECTO MATRIX FLIP.</title>
<script type="text/javascript">
function voltea(){
var miTexto = document.getElementById("texto");
var ancho = miTexto.offsetWidth;
var alto = miTexto.offsetHeight;
if(navigator.userAgent.indexOf("Firefox") != -1){
var canvas = document.getElementById("reflejo");
canvas.style.display = "block";
var cadena = miTexto.textContent;
miTexto.style.display = "none";
canvas.width = ancho;
canvas.height = alto;
var ejemplo = canvas.getContext("2d");
var colorFondoTexto =
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("background-color");
var colorTexto =
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("color");
var grosorTexto =
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("font-weight");
var medidaTexto =
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("font-size");
var fuenteTexto =
document.defaultView.getComputedStyle(miTexto, null).getPropertyValue("font-family");
ejemplo.fillStyle = colorFondoTexto;
ejemplo.fillRect(0, 0, ancho, alto);
ejemplo.save();
ejemplo.transform(-1, 0, 0, 1, ancho, 0);
ejemplo.translate(0, alto*0.8);
ejemplo.mozTextStyle = grosorTexto+ " " +medidaTexto+ " " +fuenteTexto;
ejemplo.mozPathText(cadena);
ejemplo.fillStyle = colorTexto;
ejemplo.fill();
ejemplo.restore();
}}
onload = voltea;
</script>
<style>
html{height:100%; width:100%; }
body{color:#ffffff; background-color:#000000; }
#contenedor{background-color:#ffff80; overflow:visible;
min-width:10px; min-height:10px; float:left; height:1; width:1;
border:1px solid #ffff00; white-space:nowrap; -webkit-transform: matrix(-1,0,0,1,0,0); }
#texto{font:bold 100px 'verdana' 'arial' 'serif';
filter:progid:DXImageTransform.Microsoft.Matrix(M11='-1', M12='0', M21='0', M22='1', SizingMethod='auto expand'); color:#ffffff;
background-color:#000000; zoom:1; }
#reflejo{display:none; }
</style>
</head><body>
<h2>Voltea texto con filtro <tt>Matrix()</tt> en Internet Explorer 5.5+, con función <tt>transform CSS</tt> en Safari / Chrome y con función <tt>transform canvas</tt> en Firefox.</h2>
<div id="contenedor"><span id="texto">Foros del Web</span><canvas
id="reflejo"></canvas></div>
</body></html> Un detalle. En el ejemplo de
Panino5001 se menciona que
canvas funciona en los navegadores estándar, lo que puede inducir a la idea de que es un código válido. No lo es. Sí —creo— está incluído en el borrador de HTML5, y es más de lo que se puede decir del filtro
Matrix. Pero hasta que no lo aprueben no será válido.