Problemas con giro de imagenes (CSS3)

[tedydavis]

Mis queridos colegas programadores y diseñadores, estube teniendo problemas con un codigo, la idea que tenia era girar una imagen estatica con un movimiento 3D (me estube informando sobre el tema CSS3) y no logro que funcione, a continuacion les paso las partes del CSS que me están complicando (un resumen de lo que no funciona) a ver si alguien me puede dar una mano.

Código:

@keyframes anim_3d{
from{transform: rotateY(0deg);}
to{transform: rotateY(130deg);}	
}

@charset "utf-8";
#3d{
	width: 100px;
	height: 149px;
	animation-name: anim_3d;
	transform-style: preserve-3d;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
	animation-duration: 6s;
	animation-play-state: running;
	behavior:url(scripts/ie-css3.htc);
}

a propósito, uso el prefixfree para no tener que repetir tanto código. aunque no se si es compatible con el keyframe. (también intente hacer la animación sin usar keyframe, pero sigue sin moverse, la idea era que este constantemente en movimiento desde que se abra la pagina.

díganme que esta mal! después de casi 7 años sin diseñar me encontré con muchas cosas nuevas y lindas ^^

[kseso?]

¿Tiene así como muestra sus estilos?

Entonces, lea ésto. Creo que ahí tiene la razón por la que sus estilos son ignorados.

[tedydavis]

probe quitandole el charset... y tmb sigue sin funcionar... :s

te paso la hoja de estilos completa

Código:

@keyframes anim_3d{
from{transform: rotateY(0deg);}
to{transform: rotateY(360deg);}	
}

body{
	background:#000;
	margin: 0px;
	padding: 0px;		
}
table{
	border-collapse:collapse;
	width: 100%;
	height: 100%;
	border: 0px;
	border-spacing: 0px;	
}
h2{
	font-family: Helvetica, sans-serif;
	font-size:63px;
	color: #FFF;
	text-shadow:
	1px 1px 0 #CCC,
	2px 2px 0 #CCC,
	3px 3px 0 #444,
	4px 4px 7px #444;
	behavior:url(scripts/ie-css3.htc);
}
h3{
	font-family: Helvetica, sans-serif;
	color: #FFF;
	text-shadow: 1px 0px 0 #999;
}
#3d{
	width: 100px;
	height: 149px;
	animation-name: anim_3d;
	transform-style: preserve-3d;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-duration: 6s;
	animation-play-state: running;
	position:relative;
	behavior:url(scripts/ie-css3.htc);
}

[kseso?]

Siguiente:
Le iba a recomendar otra lectura, pero quizás por hoy ya sean suficientes =P

Los selectores, entre otras restricciones, no pueden comenzar por un número:
#3d es erróneo y será ignorado.

Pero si por alguna razón debe utilizar esa cadena, 'escape' el numeral:
#\3d

Bueno, cambio de opinión =P
Si quiere más info al respecto aquí