Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Flip-card avec les transformations 3D CSS

Réaliser un effet de retournement 3D avec CSS3

Création: décembre 2011Modifié:

What a beautiful graphic!

image abstraite
Contenu
Full CSS Pas de JavaScript
Navigateurs
Firefox Safari Chrome Internet Explorer
Partagez
Facebook Twitter

Votez

82 votes4.27

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.

Envie d'une nouvelle démo?

Un p'tit mot...

#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 ! ^^


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)