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

Animation CSS et effet typographique 3D

Utiliser les transformations 3D CSS pour réaliser une animation sympa.

Création: décembre 2011Modifié:

DO YOU

REALIZE

IT'S JUST

CSS

?

Replay demo
Contenu
Full CSS Pas de JavaScript Pas d’images
Navigateurs
Firefox Safari Chrome Internet Explorer
Partagez
Facebook Twitter

Votez

107 votes4.65

Démo 100% CSS. Utilisation des animations CSS et des transformations 3D pour réaliser cet effet. Fonctionne avec IE10, Chrome/Safari et Firefox 10+.

Les bugs...

bug sur animation-delay avec certains navigateurs lors du premier chargement de la page. (les animations de chaque bloc se chargent simultanément)

bug sur "replay demo" sur les navigateurs autres que Chrome/Safari : la déclaration animation-play-state : running ne relance pas l’anim... (a tester)

Note : Ajout de tous les préfixes navigateurs avec prefixmycss

Envie d'une nouvelle démo?

Un p'tit mot...

#1par Azledev, le 3 décembre 2011

Aucune explication ? Effet très réussis, dommage de réduire sa a un simple copier coller quand même . Nous donner des explications sa nous permettra de créer un truc dans le même genre nous même :)

Merci quand même, je suis scotché par les possibilité du CSS3.

#2par css3create, le 5 décembre 2011

@Azledev : ceci est juste une démo ! Si tu as vu (et testé) mon tuto précédent sur les transformations 3D, tu ne devrais pas avoir de soucis pour réaliser cette démo. Le principe est le même, mis à part l’utilisation d’animation CSS.

#3par Azledev, le 6 décembre 2011

Autant pour moi, je n’avais pas vu ! J’vais voir le lien que tu donne pour le code sur html5-css3 ! :)

En tout cas merci beaucoup, depuis un moment ce site est dans mes favoris, pour tout te dire je m’inspire beaucoup de tes créations mais aussi du design de ton site ! Etant fan des couleurs je n’ai pu m’empêcher de les prendre pour moi . En espérant que sa ne te dérange pas ! Bonne continuation ! ;)

#4par LukyVj, le 7 décembre 2011

J’adore, le CSS3 m’épatera toujours !
Votre site est une référence en termes de qualité.
+1

#5par meeko, le 21 septembre 2012

le replay ne marche pas sous firefox une idée pour relancer l’anim ?

#6par css3create, le 21 septembre 2012

@meeko : Tu peux tenter avec du JS en ajoutant et en retirant une classe. J’avais fais un truc du genre en jQuery :

$('#replay').bind("click", {obj: "#typo div p"},function(e){
   $(e.data.obj).toggleClass('anim');
   return false;
});

En gros, lors du clic sur le bouton, tu toggle la classe des éléments contenus dans #typo. Il ne faut pas oublier d’ajouter au moins une fois la classe au départ pour que l’anim se lance.

#7par meeko, le 21 septembre 2012

après un essai sur vôtre animation avec le code fourni js le replay ne marche pas.

#8par css3create, le 21 septembre 2012

@meeko : jQuery est-il bien chargé ? Le DOM est-il entièrement chargé ?

#9par meeko, le 21 septembre 2012

une erreur été apparu, merci bien.

#10par Con’Art, le 28 avril 2013

Vraiment sympa comme effet. J’apprend pas a pas sur ce site !


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.)