la verità sui Flip 3d ?

[stardom]

ci sono diversi effetto flip 3d, e li ho provati tutti, ma nessuno è veramente compatibile con i browser che dice di essere compatibile. Per esempio:
1) http://lab.smashup.it/flip/ dice di essere addirittura compatibile con IE6,7,8 e quindi ovviamente con i successivi... manco per niente!
2) http://guilhemmarty.com/flippy// come sopra
3) http://css3.bradshawenterprises.com/flip/ dice che funziona addirittura sul IE6, ed invece nemmeno IE10
4) http://davidwalsh.name/css-flip dovrebbe essere il migliore perchè utilizza solo CSS e dice di essere aggiornato per IE10, ma a me non funziona nemmeno la visibility:hidden
5) http://dev.jonraasch.com/quickflip/examples/ e http://jonraasch.com/blog/quickflip-2-jquery-plugin non hanno l'effetto con hover
6) https://github.com/heygrady/transform/wiki necessita un programmatore della IBM
7) http://css3playground.com/3d-flip-cards/ è l'unico che ha almeno la decenza di far vedere back e front in IE, anche se senza animazione

Dunque sono tutti "leader" ma non ne funziona nessuno. Qualcuno ha implementato un flip 3d veramente a prova di browser passati e futuri?

[Experiment8]

Ciao,

con tutta sincerità non ho mai utilizzato nessun dei succitati ma per esperienza preferisco scriverlo a manina, sicuramente puoi farlo da CSS3 su tutti i browser moderni e IE10+, ovviamente da IE9 in giù o vai di javascript o non potrai mai con puro CSS, ma anche li non penso che il gioco valga la candela.
La strada più semplice mi sembra gestirla da CSS su browser moderni e lasciare senza animazione su browser datati, ma tutto dipende da cosa vuoi ottenere, puoi essere più specifico sul problema?

Tieni anche conto anche che implementare una animazione del genere a livello js su un IE8 per esempio, ho i miei dubbi che tu possa mai avere una animazione fluida e gestita bene, semplicemente andrebbe evitata a parer mio, piuttosto che farla vedere male.

In conclusione l'ultimo mi sembra il migliore.

[stardom]

Ciao. Non sono ingrado di fare un flip partendo da zero. Sono solo un designer e non un programmatore. Ma partiamo dunque da cosa vorrei ottenere: semplicemente un flip sui browser moderni e sui dispositivi mobili, ed un semplice box sui browser vecchi che al click faccia vedere la faccia retrostante. Niente di speciale, no? Eppure tutti quegli script che ho citato si perdono un pezzo, che sia in un FF od in un Tablet. Il problema più grosso che riscontro è il fatto che la backface-visibility:hidden spesso non funziona, facendomi vedere le due faccie del flip sovrapposte.

[Experiment8]

Ciao stardom,

l'ultimo che hai menzionato:

http://css3playground.com/3d-flip-cards/

Che problemi ti da?

[stardom]

L'ultimo menzionato (che appunto è l'unico che sui vecchi browser almeno fa vedere una facciata sopra l'altra) l'avevo scartato perchè non riuscivo a creare un pulsante per il toggle posizionato esterno al box. Sul sito che sto facendo c'è sia la possibilità del mousehover che del pulsante, ma non riuscivo a combinare le due cose, che infatti non sono presenti (combinate) su quello script http://css3playground.com/3d-flip-cards/.
Adesso ci sto nuovamente provando, in quanto ho capito che il vero problema di compatibilità fra browsers/tablets/phones è il mousehover. Dunque farò funzionare il flip solo con il mouseclick.

[Experiment8]

Ho capito,

Nel caso fammi sapere che proviamo a creare il pulsante

[stardom]

Ascolta un po', io ho praticamente adattato lo script in questione (www.lalegatoria.it) sostituendolo a quello precedente. Ho anche ben configurato il pulsante, ed ora il flip avviene sia cliccando sul pulsante che sul flip stesso. Ho però un problema nel flip che contiene la contact form, perchè se nella facciata back mantengo <?php include "contact/form.php"; ?> non mi carica la form (cosa che succede nel vecchio sito (/index_old.html), mentre se inserisco la form intera (ovvero inclusa nei tags <form>) allora me la carica nel flip, ma non è funzionale in quanto basta cliccare su un campo vuoto che mi flippa di nuovo... cioè interpreta qualsiasi click come l'action per flippare.
Dov'è il conflitto d'interessi?

[Experiment8]

Ciao,

Si il problema è che al click lo interpreta come comando di flip dato che la form è all'interno del box, bisogna impedirlo da script creando un'eccezione, gli do un'occhiata e ti faccio sapere...

[Experiment8]

Ciao,

prova così:

$(document).ready(function(){

                // set up hover panels
                // although this can be done without JavaScript, we've attached these events
                // because it causes the hover to be triggered when the element is tapped on a touch device
                $('.hover').hover(function(){
                    $(this).addClass('flip');
                },function(){
                    $(this).removeClass('flip');
                });

                // set up click/tap panels
                $('.click').toggle(function(e){
                    var target = $(e.target);
                    if(target.parents('form').length > 0){ return false; }
                    $(this).addClass('flip');
                },function(){
                    $(this).removeClass('flip');
                });

                // set up contact form link
                $('.contact .action').click(function(e){
                    $('.contact').addClass('flip');
                    e.preventDefault();
                });
                $('.contact .edit-submit').click(function(e){
                    $('.contact').removeClass('flip');
                    e.preventDefault();
                });

            });

[stardom]

no amigo, purtroppo il problema persiste... bisogna tentare un altra eccezione (però è strano, perchè nell'originale non c'è nessuna eccezione). Inoltre avrei bisogno che al click su invia il flip di ritorno mi riporti i messaggi di errore/success riferiti all'invio (ma forse questa è un'altra storia sulla quale ritorneremo)