Buenos días,
Un día más me hallo con el mismo problema pero esta vez con soluciones por parte de los usuarios que es de agradecer vuestras aportaciones. Ahora investigaré todas vuestras sugerencias en la medida de lo posible.
Por otro lado, encontré una web que con css3 y html5 se podía hacer algo a lo que me refería aunque no llegué a poder hacerlo que fuera un bucle ni que funcionara en internet explorer 10, además también había un pequeño matiz entre chrome y firefox en cuestión de visualización.
Dejaré el código por si alguien tiene el mismo problema que yo o parecido dado que he visto preocupación y participación por parte de los usuarios del foro. ^^
Detalles del código antes de interpretarlo para los "no tan entendidos" ;)
Mis imágenes todas ellas son de 250x250 pixels, que serán algunos parámetros que ponga al principio del código, después acontinuación pongo la mitad de pixels de la imagen (125px) en los demás atributos a rellenar. Y casi al final del todo le digo al código cuanto quiero mover el cubo con el teclado (las flechas) en grados. En mi caso como quiero que para capturar los fotogramas sea luego el gif un movimiento suave lo puse a 5, aunque seguramente lo cambie porque sino va a ser mucho tiempo recogiendo fotograma a fotograma para poder luego juntar TODAS las partes.
Es por eso que como es un coñazo miraré vuestras opciones a ver si al menos las exportaciones de cada fotograma son mas fáciles de obtener.
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<script>(function(d){d.className=d.className.replace(/^no-js\b/,'js');}(document.documentElement));</script>
<link rel="stylesheet" href="../../css/master.css?13" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="http://use.typekit.com/fdb0guo.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</head>
<body class="experiment">
<div class="wrapper">
<div class="test test-3dtransforms">
<!-- ************************** -->
<!-- START OF EXPERIMENT -->
<!-- ************************** -->
<style>
#experiment {
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 250px;
-moz-perspective: 800;
-moz-perspective-origin: 50% 250px;
}
#cube {
position: relative;
margin: 100px auto 0;
padding-top:-200px;
height: 250px;
width: 250px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 250px;
width: 250px;
/*padding: 20px;*/
/*background-color: rgba(50, 50, 50, 0.7);*/
/*font-size: 27px;*/
/*line-height: 1em;*/
/*+color: #fff;*/
/*border: 1px solid #000;*/
border-radius: 3px;
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(125px);
-moz-transform: rotateX(90deg) translateZ(125px);
}
#cube .two {
-webkit-transform: translateZ(125px);
-moz-transform: translateZ(125px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(125px);
-moz-transform: rotateY(90deg) translateZ(125px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(125px);
-moz-transform: rotateY(180deg) translateZ(125px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(125px);
-moz-transform: rotateY(-90deg) translateZ(125px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(125px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(125px);
}
.cuadrado{
position: relative;
margin: 100px 0 0 0;
width:600px;
height:475px;
border-style:solid;
border-width:1px;
border-height:1px;
}
</style>
<div class="cuadrado">
<div id="experiment">
<div id="cube">
<div class="face one">
<img src="images/C-250x250.png" />
</div>
<div class="face two">
<img src="images/B-250x250.png" />
</div>
<div class="face three">
<img src="images/E-250x250.png" />
</div>
<div class="face four">
<img src="images/D-250x250.png" />
</div>
<div class="face five">
<img src="images/A-250x250.png" />
</div>
<div class="face six">
<img src="images/F-250x250.png" />
</div>
</div>
</div>
</div>
<!-- ************************** -->
<!-- END OF EXPERIMENT -->
<!-- ************************** -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery-1.9.0.min.js"><\/script>')</script>
<script>
$(function(){
$('.show-experiment').on('click', function(evt) {
evt.preventDefault();
$('.fallback').fadeOut('slow', function() {
$('.test').fadeIn('slow');
});
});
});
</script>
<script src="../tests/3dtransforms.js?13"></script><script>
var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
prop,
el = document.createElement('div');
for(var i = 0, l = props.length; i < l; i++) {
if(typeof el.style[props[i]] !== "undefined") {
prop = props[i];
break;
}
}
var xAngle = -35, yAngle = -35;
$('body').keydown(function(evt) {
switch(evt.keyCode) {
case 37: // left
yAngle -= 5;
break;
case 38: // up
xAngle += 5;
break;
case 39: // right
yAngle += 5;
break;
case 40: // down
xAngle -= 5;
break;
};
document.getElementById('cube').style[prop] = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
});</script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script>var _gaq=[['_setAccount','UA-59763-15'],['_trackPageview']];(function(d,t){
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.async=1;g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)
}(document,'script'))</script>
</body>
</html>
URL de la web donde obtuve el código: [URL]http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/[/URL]
Muchas gracias a todos, ya os comentaré si he podido realizarlo aunque no pueda exponer la imagen dado que es una imagen corporativa de la empresa :( sino de buen agrado la compartiría con el resto de usuarios.
