Es posible realizar este ejemplo con css3?

[NSD]

Hola gente, primero que nada, aclaro que soy programador, el css y el diseño front-end no son mis puntos fuertes, por eso mismo tengo ganas de hacer algo avanzado para aprender a dominar un poco mas esta tecnologia que se relaciona intimamente con lo que ya se hacer.

Lo que se me ocurrio hacer es algo como esto: http://tympanus.net/Development/Imag...our/index.html

Pero completamente con css3, evitando el uso de javascript (y mas aun de frameworks de este) si es posible.

Habia pensado en que la estructura html podria ser algo asi:

Código HTML:

<section class="zoom_tour">
  <article id="pantalla_1">
     <img src="fondo1.jpg">
     <label for="chk_zt1_2" data-width="40" data-height="50" data-top="20" data-left="50"></label>
     <label for="chk_zt1_3" data-width="40" data-height="50" data-top="80" data-left="50"></label>
  </article>
  <article id="pantalla_2">
     <img src="fondo2.jpg">
     <label for="chk_zt1_3" data-width="40" data-height="50" data-top="80" data-left="50"></label>
  </article>
  <article id="pantalla_3">
     <img src="fondo3.jpg">
     <label for="chk_zt1_2" data-width="40" data-height="50" data-top="20" data-left="50"></label>
  </article>
  <input type="radio" id="chk_zt1_1" name="chk_zt1" value="pantalla_1" checked>
  <input type="radio" id="chk_zt1_2" name="chk_zt1" value="pantalla_2">
  <input type="radio" id="chk_zt1_3" name="chk_zt1" value="pantalla_3">
</section>
 

Donde cada seccion de la clase zom_tour es un marco de zoom tour (para permitir mas de uno en la misma pantalla), cada article es una pantalla de ese tour que contiene una unica imagen dentro que se mostraria como fondo y arriba los label que serian los marcos esos blancos que cambian la pantalla.
Cada seccion tendria un conjunto de input radio que se activan con los label y segun cual este activado se muestra el article con id=atributo_value.

Lei por algun lado que css3 podia acceder (solo para lectura) a los atributos, nose si es posible.

Agradeceria que alguin mas experimentado en css3 me dijera si esto es posible de hacer, desde el punto de vista tecnico, no importa cuanto trabajo lleve.

Si se puede hacer, os pido indicaciones de por donde arrancar y que temas estudiar, no pido codigo directamente ya que quiero aprender a hacerlo solo, pero si alguien escribe algo agradeceria que le ponga comentarios y explique brevemente para que es cada cosa para que pueda seguir sus pasos.

[CrepitantE]

Si es posible realizarlo, tendría que ser realizando transiciones (no conozco mucho del tema) pero se que por alli es el camino. Si quieres busca mas información sobre las transiciones en css3.

http://www.w3schools.com/css/css3_transitions.asp

Que se me ocurriría a mi para lograr eso. Mi esquema sería el siguiente:

Al cliquear determinado objeto en la pantalla (el cuadro blanco) ... Y por medio de las transiciones aumentara el zoom (puede ser en un 1000%) a la vez que se vaya apareciendo la segunda imagen desde un zoom mucho mas pequeño hasta posicionarse en la pantalla.

[NSD]

Hola crepitan, muchas gracias por la respuesta, he empezado a hacer algo y funciona bastante bien :) http://proyecto-nsd.com.ar/zoomTour/

Funciona unicamente con css3, si bien hay un archivo js lo unico que hace es convertir el atributo data-style en propiedades css, esto lo hago para no usar css inline y porque los navegadores solo soportan (por ahora) la funcion attr() para la propiedad content, sino no seria necesario.

Como puedes ver esta bastante aceptable, lo que quiero hacer ahora es agregarle efectos como los que tu mencionas, por ahora esta el fecto fade simple, pero quisiera poner efectos 3d o algo mas llamativo.

Podrias ayudarme o decirme como hacer un efecto 3d?

[CrepitantE]

Bueno hay unos conceptos basicos, dependeindo lo que busques. Rotacion, perspectiva, zoom la combinacion especifica y de acuerdo a lo que busques te ayuda.
P.ej: Si quisieramos utilizar esta animacion en star wars:
https://www.youtube.com/watch?v=2Mo0dSHFGPg

1) El logo inicia grande y se va volviendo pequeño (utiliza la herramienta zoom) y al llegar a cierto tamaño va desvaneciendo progresivamente (alpha).

2)Las letras van subiendo se puede utilizar transiciones y perspectiva (le da forma de trapecio).

Tocaría aprender a dominar estas nuevas técnicas en css3.

Aca hay un buen tutorial empleando las transiciones en css3:
http://xitrus.es/blog/87/Efecto_flip...en_3D_con_CSS3

Y acá mas ejemplos practicos:
http://xitrus.es/utilidades/Transiciones.