CSS3 "Curved Surface" 3D Transform/Perspective Help

Question

Estoy intentando crear una especie de multitud de perspectivas para mi sitio web. Es literalmente un ul lleno de imágenes planas, y quiero crear una sensación de "curva" como una multitud redondeada. Donde es hacia adentro y perceptivamente más pequeño hacia el interior y se curva hacia los extremos.

El ejemplo del círculo del póster es el más cercano que puedo encontrar http://www.webkit.org/blog-files/3d-transforms/poster-circle.html excepto que no necesito el "frente" - solo la parte posterior. Cada imagen es 100px x 100px, 23 imágenes por fila y cuatro filas.

Estoy bastante perdido en cuanto a cómo abordar esto ... He intentado aplicar de varias formas la transformación -webkit única: rotateY (x) translateZ (x) a cada imagen, pero nunca bastante llegar allí (luchando con el cálculo de los valores correctos, o usar la cosa incorrecta por completo), así como jugar con perspectiva.

Answer 1

Yo sé que no es exactamente lo que quiere, pero acaba de lanzar esto juntos y quiero ver si está en la dirección general:

http://jsfiddle.net/cwolves/mwxNK/2/

Answer 2

Este es un simple pared del cartel" "con 9 divs: todos los divs están absolutamente posicionados dentro de un div envoltorio.

En el div envoltorio, agrega: -webkit-transform-style: preserve-3d; Esto es lo que realmente crea el efecto 3D. Opcionalmente, puede agregar una configuración de perspectiva dependiendo del grado de escorzo que desee.

Y en el CSS, se crea div estilo que se ve como esto para las imágenes de la mano izquierda:

-webkit-transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg); 
-webkit-transform-origin: 100% 0%; 

y por las imágenes de la derecha:

-webkit-transform: rotateX(0deg) rotateY(-30deg) rotateZ(0deg); 
-webkit-transform-origin: 0% 0%; 

NOTA: Sólo Safari y iOS soporte preserve-3D en este momento. Para otros navegadores, tendrá que agregar perspectiva manualmente al escalar y sesgar las imágenes manualmente, y nunca se ve exactamente bien.

2014 Actualización: preserve-3D es compatible navegador ampliamente cruz ahora

Answer 3

pellizqué un poco demasiado con mi versión aquí:

http://jsfiddle.net/sJCAh/

No es exactamente lo que el colorido pic demuestra embargo

:-)

Answer 4

Acabo de encontrar esto después de crear lo siguiente que podría ayudarlo: http://jsfiddle.net/remybach/hpsJV/2/

La carne de la misma radica en esto:

&:nth-of-type(3n+1) { /* col 1 */ 
    transform:rotateY(20deg) translateZ(-30px); 
} 
&:nth-of-type(3n+2) { /* col 2 */ 
    transform:translateZ(-90px); 
} 
&:nth-of-type(3n+3) { /* col 3 */ 
    transform:rotateY(-20deg) translateZ(-30px); 
}