Le tutoriel complet est à retrouver sur html5-css3.fr.
Vous pouvez également lire un billet de blog pour rendre compatible l’effet Flipcard sous IE10 que j’ai écris sur mon blog perso.
Actualités du site CSS3Create
Actualités sur CSS et le web en général
Création: décembre 2011Modifié:
What a beautiful graphic!
Tutoriel et explications sur la réalisation de cet effet de retournement type "flip-card" avec les transformations 3D en CSS : à retrouver sur http://www.html5-css3.fr/css3/transformations-3d-css3.
Le tutoriel complet est à retrouver sur html5-css3.fr.
Vous pouvez également lire un billet de blog pour rendre compatible l’effet Flipcard sous IE10 que j’ai écris sur mon blog perso.
#1par Nico, le 2 décembre 2011
Bel effet mais ça ne fonctionne pas sur Firefox 8.0.1..
#2par css3create, le 2 décembre 2011
@Nico : oui, ça fonctionne avec Firefox 10 car j’utilise les transformations 3D.
#3par vive firefox10, le 14 janvier 2012
L’effet est remarquable manque plus que tout les utilisateurs utilisent un naviguateur adapté a l’évolution du web...
#4par Seb, le 17 janvier 2012
Pareil, ne marche pas sous la plupart des versions de firefox (actuelles)... Ce serait cool que tout le monde se mette au html5/css3 :)
#5par michel.pageperso, le 11 février 2012
Vous utilisez ces propriétés CSS3 dans 2 div différentes. J’ai essayé de les utiliser dans un menu/sous-menu classique en liste ordonnée #menu ul li ol li.... Cela ne fonctionne pas avec Chrome mais pas avec Opéra ou Firefox. Pourquoi ?
#6par SeanGooGoo, le 21 février 2012
Sans Jquery ne fonctionne que sous très peu de navigateurs. Bravo en tout cas !
#7par dark poulpo, le 10 juillet 2012
super, dommage que ça ne marche pas avec IE 9.0.8 !!! suis dég !!
#8par Alec, le 10 août 2012
Chez moi ça fonctionne nickel, sauf que je n’arrive qu’à mettre du texte brut à l’intérieur. Dès que je mets le plus petit lien, ça plante —’ ... Je pense que c’est du au "first-child" dans le code CSS, mais je vois pas trop comment régler le problème ...
Enfin c’est quand même un super truc qui a la classe ^^ !
#9par solo, le 31 janvier 2013
in IE 10 it is incorrect !
#10par Alice-Dark, le 15 octobre 2013
Super tuto ! C’est nickel et c’est très pratique. Pas besoin de JS pour une fois ! Merci ! ^^