Buenas Caballeros!
Bueno, ayer por la noche (hora Peninsular) tenia serios problemas para llevar a cabo una animación 3D, es decir , no tenia ni idea de como usar "perspective:" ni de que relación tenia con "Float:"
Bueno, pues estar toda la noche sin dormir a dado sus frutos, aquí va mi modesta contribución a todos aquellos que estén deseando implementar animaciones en 3D:
perspective:'x'; Es el angulo de ataque que renderiza el navegador, tiene que estar ligado a float:left o float:rigth , si es left, el angulo de ataque sea de 0 a 100% por el lado derecho, y idem por el izquierdo usando Rigth.
El angulo de ataque tiene que ir unido a una rotación:X,Y,Z
Aqui un ejemplo que acabo de hostear: http://www.vodoad.com/Untitled-2.html
Aqui el codigo del ejemplo :
Código:
<style type="text/css">
@-webkit-keyframes rotation {
0% { -webkit-transform: rotateY(0deg) rotateZ(0deg) skewX(0deg) scalZ(1.0);
}
50% {
-webkit-transform: rotateY(60deg) rotateZ(10deg) skewX(15deg) scale(10,5);
}
100% {
-webkit-transform: rotateY(-90deg) rotateZ(-50deg) skewX(-50deg) scalZ(1.0);
}
}
@-webkit-keyframes rotationA {
0% { -webkit-transform: translateX(0px);
}
50% {
-webkit-transform: translateX(900px);
}
100% {
-webkit-transform: translateX(-300px);
}
}
#A {
}
.offA {
width:178px;
height:112px;
padding:0px 0px;
margin:50px 500px;
display:inline;
float:left;
-webkit-perspective: 1000;
-webkit-animation:rotationA 4s infinite linear;
}
.offA img {
-webkit-animation:rotation 4s infinite linear;
}
</style>
Código:
<body>
<div id="A" class="offA"><img src="Imagenes/pruevacontenedor2.png"></div>
Efecto hecho enteramente con codigo CSS3, altamente Experimental, solo soportado por Chrome al 100% , By:Brais Martelo lopez "elb"
</body>