¿Cómo puedo lograr un mejor efecto de elevación 3D de un logotipo para un sitio web?

Este es mi enfoque actual, solo se mueve la sombra. http://tinkerbin.com/uekpe227

Este es un segundo enfoque, tanto la sombra como las letras se mueven. http://tinkerbin.com/LjiGDKa7

Y en el último acercamiento la sombra no se mueve. http://tinkerbin.com/ZDvUj6Pi

(Consejo: pasa el cursor sobre ellos para ver el efecto, necesitas un navegador moderno)

Una animación CSS puede parecer genial debido a la novedad, pero para un logotipo, probablemente sería mejor usar un programa de gráficos para que el logotipo realmente destaque. Será estático, pero también se verá mejor y se verá así todo el tiempo en lugar de solo cuando el usuario pasa el mouse sobre él.
:/ Bueno, soy consciente de eso, el problema en cuestión persiste.

Respuestas (1)

La verdadera respuesta a esta pregunta proviene directamente de preguntar "¿Cómo funciona en el mundo real?" Un efecto como este parecerá artificial e incorrecto si no imita lo que sucedería con un objeto físico. Este es un principio general que se aplica a todos los efectos que usamos en sitios web, en papel o en películas. Un error clásico en la composición de Photoshop es que la luz del fondo provenga de una dirección diferente a la luz del sujeto. Nunca puede parecer real, porque el mundo real no funciona de esa manera. Tienes un problema similar aquí, así que prueba esto:

Coloque un objeto plano (una moneda funcionaría) sobre una superficie blanca, enciéndalo y luego levántelo ligeramente. ¿Qué le sucede al objeto en su campo de visión? ¿Qué hace la sombra? Ambos se mueven, pero se mueven simultáneamente, no uno a la vez. Es por eso que ninguno de tus ejemplos se ve bien.

Cada vez que se enfrenta a un desafío como este, en el que desea que algo dé la ilusión de un análogo del mundo real, lo que debe hacer es encontrar ese análogo del mundo real o crearlo, luego observarlo hasta que esté seguro de que sabe lo que es . parece. Luego regrese a Photoshop o a la aplicación de su elección y haga que se vea igual allí.

Gran respuesta, sin embargo, cuando ambos se mueven y se cierran, es porque se está moviendo el menor paso posible, un píxel. Es por eso que decidí simplemente mover la sombra. Sin embargo, modifico el CSS, siempre termina pareciendo artificial si me meto con la posición del texto. Aquí hay un cuarto intento: tinkerbin.com/CHC5BgJE ¡Por tu tiempo!
Modifiqué tu CSS a lo que creo que funciona bien. Transición mucho más corta (.05, en lugar de .5), menos movimiento, sombra más definida.