El que está abajo tampoco es el más eficiente : la tira debió ser vertical en vez de horizontal, y hasta podía haber sido un cuadrado, calculando las posiciones de cada cuadro con un javascript más complejo. No hay thumbnail, así que va solamente el enlace.
http://img234.imageshack.us/img234/2641/calavera3d2so.jpg
Apoveché el código para hacer un efecto de animación 3D ( una rotación sobre el eje y ). Por supuesto que es posible nada más que con la imagen apropiada; y sobre los métodos para hacerla se puede consultar en el foro de Diseño.
Código:
Las ventajas de un JPG animado a javascript sobre el GIF animado son evidentes : se puede manejar la velocidad, se puede detener y reiniciar en cualquier punto, se puede invertir la dirección, y todo en forma manual, automática o siguiendo eventos que ocurran en otra parte del documento.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<title>EFECTO DE ROTACIÓN DE IMAGEN CUADRO A CUADRO. </title>
<script type="text/javascript">
var despl = 0;
/*RUEDITA*/
function ruedaIE(){
if (event.wheelDelta >= 120) adel();
else if (event.wheelDelta <= -120) atras();
}
/*BOTÓN DESLIZANTE*/
function gira(T){
var valor = T.scrollLeft;
despl = (Math.floor(valor/200))*-100;
document.getElementById("imagen").style.left = despl+ "px";
}
/*BOTÓN OVER / CLICK*/
var paso;
var distancia = 0;
var vel = 100;
function adel1(){
if(despl == -2800) despl = 0;
despl = despl - 100;
status = despl;
document.getElementById("imagen").style.left = despl+ "px";
adel2();
}
function adel2(){
paso = setTimeout("adel1()" , vel)
}
function atras1(){
if(despl == 0) despl = -2800;
despl = despl + 100;
status = despl;
document.getElementById("imagen").style.left = despl+ "px";
atras2();
}
function atras2(){
paso = setTimeout("atras1()" , vel)
}
/*BOTÓN MOVE*/
var iconos = ["-" , "<" , "-" , ">"];
var nIconos = 0;
var espera = 0;
var conAyuda = true;
function cambioIco(T){
T.style.cursor = "default";
T.title = "Atr\xE1s";
if(T.value == "?"){
ayuda();
}
nIconos +=1;
if(nIconos == 4)nIconos = 0;
T.value = iconos[nIconos];
}
function cambioDir(T){
if(T.value == "-"){
T.title = "Detener";
}
else if(T.value == "<" && espera == 0){
T.title = "Atr\xE1s";
atras();
espera = 1;
setTimeout("espera = 0;" , 75)
}
else if(T.value == ">" && espera == 0){
T.title = "Adelante";
adel();
espera = 1;
setTimeout("espera = 0;" , 75)
}
}
function ayuda(){
if(conAyuda)
conAyuda = confirm("Click para cambiar de direcci\xF3n o detener. Move para animar. ¿Desea que la ayuda est\xE9 disponible con Doble Click?.");
}
/*BOTÓN MOVE Y RUEDITA*/
function adel(){
if(despl == -2800) despl = 0;
despl = despl - 100;
status = despl;
document.getElementById("imagen").style.left = despl+ "px";
}
function atras(){
if(despl == 0) despl = -2800;
despl = despl + 100;
status = despl;
document.getElementById("imagen").style.left = despl+ "px";
}
/*TODOS*/
onload = function(){document.getElementById('imagen').style.left = '0'; distancia = 0;}
</script>
<style type="text/css">
body{font:bold 100% "times new roman" "arial" "courier new"; text-align:center; background-color:#000}
#contImagen{height:75px; width:100px; overflow:hidden; padding:0; border-collapse:collapse; position:relative; text-align:left; margin:auto; margin-top:50px; }
#imagen{position:absolute; }
h2{color:#f00; text-align:left; }
/*BOTÓN DESLIZANTE*/
#relleno{width:5800px; height:1px; overflow:hidden; font-size:1px; background-color:transparent; }
#barraBoton{overflow:-moz-scrollbars-horizontal; overflow:auto; margin:auto; height:50px; width:200px; scrollbar-face-color:#f00; scrollbar-highlight-color:#000; scrollbar-shadow-color:#000; scrollbar-arrow-color:#000; scrollbar-track-color:#000; scrollbar-base-color:#000; scrollbar-3dlight-color:#f00; scrollbar-darkshadow-color:#f00; }
/*BOTÓN OVER / CLICK*/
input{font: bold 150% "times new roman" "arial" "courier new"; width:1.5em; height:1.5em; background-color:#f00; border-color:#f00}
/*BOTÓN MOVE*/
#bCambio{width:4em; height:1.5em; background-color:#f00; font:bold 150% "times new roman" "arial" "courier new"; cursor:help; }
</style>
</head>
<body>
<h2>Rotar imagen con botones : deslizante, <i>over / click</i>, y <i>move</i>. (IE , FF)</h2>
<div id="contImagen"><img id="imagen" src="http://img234.imageshack.us/img234/2641/calavera3d2so.jpg" onmousewheel="ruedaIE()" /></div>
<!-- BOTÓN DESLIZANTE -->
<div id="barraBoton" onscroll="gira(this)">
<div id="relleno"></div>
</div>
<br /><br />
<!-- BOTÓN OVER / CLICK -->
<input type="button" id="bAtras" value="«" onmouseover="vel=500; atras1()" onmouseout="clearTimeout(paso)" onmousedown="vel=150; atras1()" onmouseup="vel=500;clearTimeout(paso)" onfocus="this.blur()" />
<input type="button" id="bAdel" value="»" onmouseover="vel=500; adel1()" onmouseout="clearTimeout(paso)" onmousedown="vel=150; adel1()" onmouseup="vel=500;clearTimeout(paso)" onfocus="this.blur()" />
<br /><br />
<!-- BOTÓN MOVE (en algunos navegadores, el evento onmousemove se comporta como onmouseover) -->
<input type="button" id="bCambio" value="?" title="Click para ayuda." onclick="cambioIco(this)" onmousemove="cambioDir(this)" ondblclick="ayuda()" onfocus="this.blur()" />
</body>
</html>
[edit]
Al final decidí meter la imagen.
Código:
[/edit] 
