IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Publications (X)HTML et CSS Discussion :

Les transformations 3D en CSS3


Sujet :

Publications (X)HTML et CSS

  1. #1
    Rédacteur

    Homme Profil pro
    Responsable de projet
    Inscrit en
    mai 2009
    Messages
    634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de projet
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mai 2009
    Messages : 634
    Points : 3 511
    Points
    3 511
    Par défaut Les transformations 3D en CSS3
    Bonsoir à tous,

    voici un article expliquant les transformations 3D en CSS3. Vous apprendrez également à faire un cube, un flip card, etc...
    Munissez vous d'un navigateur Safari afin de pouvoir profiter des démos.

    Comme d'habitude, n'hésitez pas à faire part de vos remarques et questions à la suite de ce message.

    Les transformations 3D en CSS3

    Merci!

  2. #2
    Invité
    Invité(e)
    Par défaut
    tres tres intéressant je ne pensait que safari etait deja capable de faire du css3d en tout cas le faire en css avec possibilité d'interagir avec le javascript sa promet

    apparemment selon ce que j'ai lu au niveau de la feuille de route de Firefox sa devrait être mis en place dans le courant de l'année

    en tout cas le tuto est claire et precis; et félicitation pour les demos
    Dernière modification par Invité ; 14/03/2011 à 18h41.

  3. #3
    Rédacteur

    Homme Profil pro
    Responsable de projet
    Inscrit en
    mai 2009
    Messages
    634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de projet
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mai 2009
    Messages : 634
    Points : 3 511
    Points
    3 511
    Par défaut
    C'est plutôt une bonne nouvelle concernant Firefox, j'espère que les autres navigateurs feront de même!

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 647
    Points : 91 421
    Points
    91 421
    Billets dans le blog
    20
    Par défaut
    Merci pour cet article !

    Les exemples à la fin sont assez impressionnants !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre actif
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    août 2008
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : août 2008
    Messages : 557
    Points : 293
    Points
    293
    Par défaut
    C'est super. Ce ne serait plus la peine de passer du temps sur photoshop pour faire vite fait quelques effets.

    Mais parfois je me demande si c'est vraiment un gain de temps sachant qu'il faudra gérer les exceptions des autre "gros" navigateurs du marché. Genre IE.

    IE ne gère toujours pas les ombrages, les dégradés, de la même façon que chrome ou firefox. Il faut passer par des sortes de patch qui au final laisse des grosses différences d'affichages.

    Autre exemple, je crois que seul firefox gère le multi-dégradés, on peut faire 3 dégradés successifs sur firefox mais pas sur chrome. Mais sur chrome on peut gérer l'angle de dégradé radial et pas sur firefox... Bref. Tant que ce n'est pas uniformisé, c'est pas la peine.

  6. #6
    Invité
    Invité(e)
    Par défaut
    sa ma tellement inspirer que j'ai realisé un cahier avoir a cette endroit

  7. #7
    Rédacteur

    Homme Profil pro
    Responsable de projet
    Inscrit en
    mai 2009
    Messages
    634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de projet
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mai 2009
    Messages : 634
    Points : 3 511
    Points
    3 511
    Par défaut
    Sympa comme exemple

    Concernant la compatibilité des navigateurs, Chrome 12 (Chrome Canari dans sa version 12 pour l'instant) permet le rendu 3D en CSS3.
    Sous windows XP, il faudra ajouter l'argument :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    "C:\Documents and Settings\----\Local Settings\Application Data\Google\Chrome SxS\Application\chrome.exe"  --ignore-gpu-blacklist
    En effet Chrome a enlevé le support WebGL par défaut sous XP (et cela depuis la version 10) :
    http://www.google.com/support/forum/...3379b1a2&hl=en

  8. #8
    Futur Membre du Club
    Femme Profil pro
    Directeur de projet
    Inscrit en
    avril 2011
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Directeur de projet
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : avril 2011
    Messages : 7
    Points : 5
    Points
    5
    Par défaut
    Bonjour,

    Ce tutoriel est magnifique, vraiment ! Et je remercie ornitho13 pour son tutoriel

    Le problème, c'est que ce n'est compatible que sur safari qui est l'un des navigateurs les moins utilisés.

    Alors voila, n'y aurait il pas une autre solution qui permettrait le même rendu mais sur tout les navigateurs ? Avec que du javascript peut être ?

    Merci de vos réponses

  9. #9
    Invité
    Invité(e)
    Par défaut
    fonctionne maitenant avec firefox 10 et une precision au sujet de l'attribut perspective il faut mettre (px) pour que firefox accepte la perspective

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    -webkit-perspective: 1200px;
    	-moz-perspective: 1200px;

Discussions similaires

  1. [Article] Les transformations 2D en CSS3
    Par ornitho13 dans le forum Publications (X)HTML et CSS
    Réponses: 6
    Dernier message: 13/02/2012, 11h38
  2. [CSS 3] Les transformations 2D en CSS3
    Par ornitho13 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 13/02/2012, 11h38
  3. [Article] Les transformations 3D en CSS3
    Par ornitho13 dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 30/10/2011, 13h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo