Trasforma CSS 3D per creare trapezio di lunghezze di bordo date

Question

Ho un elemento di dimensioni date (ad esempio, 100x300 px) che vive in un contenitore della stessa altezza e larghezza variabile che voglio trasformare usando rotateX intorno a -webkit-transform-origin: top center; mentre raccolgo lo -webkit-perspective del contenitore in modo che appaia che la linea di fondo dell'immagine rimanga dov'è, ma si espande solo per riempire l'intero contenitore.

Wow, sembra strano. Ecco una foto:

Quindi, fondamentalmente, voglio creare un trapezio con una larghezza superiore fisso e una larghezza inferiore variabile. Non riesco comunque a capire bene la matematica dietro le relazioni ... Javascript benvenuto. L'esempio seguente funziona SE il corpo è largo 600 px: http://jsfiddle.net/24qrQ/

Ora il compito è modificare la prospettiva e la rotazione in modo continuo con la larghezza del corpo. Qualche idea?

Answer 1

Va bene, dopo un bicchiere di vino la matematica è venuto verso di me:

In primo luogo, diamo un'occhiata al rapporto di prospettiva/rotazione. Visto di lato, sembra che questo:

L'elemento rosso viene ruotato intorno al suo bordo superiore, se proiettiamo suo bordo inferiore al bordo inferiore del contenitore, l'intersezione tra la linea di proiezione e la linea perpendicolare al contenitore sul suo bordo superiore è il punto di vista richiesto. Otteniamo questo per semplice trigonometria (nota phi qui è in radianti, non in gradi).

Se applichiamo questo, il bordo inferiore dell'elemento apparirà sempre sul bordo inferiore del contenitore. Ora il parametro libero è rotazione. Questo sembra avere il rapporto

rad = pi/2 - element.width/container.width 

per sufficientemente grandi larghezze, però non riesco a avvolgere la mia testa intorno al rapporto reale. Ecco un violino: http://jsfiddle.net/24qrQ/6/

Answer 2

Fondamentalmente, stai cercando di capire come mettere un oggetto nello spazio 3D, quindi si allinea con una vista 2D. È sempre una cosa complicata.

Non so cosa sia la matematica, e molti altri probabilmente no. Questo non è un problema comune. Ma ecco come andrei a capire.

L'unica variabile qui è width. E i 2 valori che dovrebbero essere modificati in base alla larghezza sono -webkit-perspective sul contenitore e -webkit-transform sull'elemento interno. Quindi modificherei manualmente i valori per alcune larghezze diverse e registro i valori 3D che dovevi inserire per far sembrare le cose giuste. (Io userei l'ispettore web per modificare i valori in tempo reale in modo da ottenere un feedback immediato)

Uno si dispone di alcuni punti di dati, li traccia su un grafico e quindi cercare di capire come cambiano. Ho la sensazione che sia una curva parabolica, ma può anche essere iperbolica o sinusoidale, la mia matematica 3D non è abbastanza buona per saperlo con certezza.

Quindi puoi provare a calcolare un'equazione in cui quando inserisci le larghezze che hai campionato, recuperi i valori 3D manuali che hai impostato in precedenza. Quindi usa JS per leggere la larghezza del contenitore e imposta i valori CSS per farlo sembrare corretto.

---

che ho fatto che con 3 larghezze 300, 450, 600:

http://jsfiddle.net/24qrQ/3/

Alcune tendenze sono evidenti. Man mano che la larghezza aumenta, la prospettiva sale ad una crescente reate e la rotazione scende ad un ritmo crescente.

Calcolare la formula esatta, ora tocca a voi.

---

Come alternativa più semplice, se capire una formula diventa troppo difficile, si potrebbe curare manualmente una manciata di larghezze e valori 3D che un aspetto gradevole e memorizzarli in JS da qualche parte. Quindi potresti semplicemente interpolare linearmente tra loro. Non sarebbe esatto, ma potrebbe essere abbastanza vicino.

Sarebbe anche meno divertente!