Sto tentando di creare un effetto 3D "apri la porta" in CSS ma non riesco proprio a farlo. Il problema è che l'uso della funzione rotateY() fa ruotare l'elemento. Puoi verificarlo qui http://jsfiddle.net/uC4du/1/Apertura della porta Effetto 3D nei CSS
Sai come modificare la rotazione "Asse di riferimento"? Cosa devo fare per far ruotare l'elemento usando gli angoli a sinistra come riferimento?
È possibile utilizzare la proprietà 'transform-origin' (http://www.w3schools.com/cssref/css3_pr_transform-origin.asp).
Impostarlo su qualcosa come: "-webkit-transform-origine: 0% 50%;"
Ecco il tuo esempio utilizzando quella proprietà: http://jsfiddle.net/aV76H/
Speranza che aiuta!
Un piccolo aggiornamento per ottenere esattamente cosa intendo: http://jsfiddle.net/aV76H/2054/ La versione originale ha avuto un effetto strano sulla parte superiore, questa è una versione simmetrica –
Questa è una risposta molto utile, ma qualcuno potrebbe indicarmi la giusta direzione per modificarla per funzionare su Firefox? – Ryan
Un'opzione consiste nel rendere l'oggetto padre due volte più largo, con metà vuoto. Quindi, mentre si gira sul suo asse centrale, la parte che è visibile sembra agire come una porta. –
@DA Sì, l'ho fatto, ma renderà tutto molto più difficile :( –
Controlla che sarà utile http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image- transitions/tympanus.net/Development/ImageTransitions/index2.html –