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 2D 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 : 44
    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 2D en CSS3
    Bonjour a tous,

    Voici un article sur les transformations 2D en CSS3 via la propriété transform.
    N'hésitez pas à faire part de vos remarques et questions à la suite de ce message.

    Les transformations en CSS3

    Merci.

  2. #2
    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 : 37
    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 : 286
    Points
    286
    Par défaut
    Merci

  3. #3
    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 : 53
    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 416
    Points
    91 416
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par Marc22 Voir le message
    Merci
    Entièrement d'accord !

    Encore une excellente synthèse, claire, concise et compréhensible
    Vivement le suivant

    Ben oui, faut pas nous habituer, sinon, on en redemande !
    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

  4. #4
    Membre éclairé

    Profil pro
    Inscrit en
    Février 2010
    Messages
    119
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 119
    Points : 777
    Points
    777
    Par défaut
    Je ne l'ai vu nul part donc j'imagine que ça ne doit pas être possible : est ce qu'il est possible d'obtenir une déformation où un côté serait plus grand que l'autre, pour donner un effet de profondeur, genre :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    |\
    | \
    |  |
    |  |
    | /
    |/

  5. #5
    Rédacteur

    Homme Profil pro
    Responsable de projet
    Inscrit en
    Mai 2009
    Messages
    634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    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
    oui cela est possible mais fera l'objet d'un autre article:
    Les transformations 3D en CSS3 (que j'écrirai pour le mois prochain a priori)


  6. #6
    Nouveau Candidat au Club
    Profil pro
    Inscrit en
    Août 2011
    Messages
    1
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2011
    Messages : 1
    Points : 1
    Points
    1
    Par défaut
    Bonjour Jérôme Debray.

    Sur ma page, je fais des rotations en CSS3 à des liens qui ne fonctionnent que avec Mozilla Firefox et pas avec Chrome ou Safari (en général c'est plutôt le contraire...)

    Voici le code CSS3 des liens et du .hover :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     
    #article-3 li a {
      	color: grey;
    	-webkit-transition: 2s ease-in;
      	-moz-transition: 2s ease-in;
      	-o-transition: 2s ease-in;
    }
     
    #article-3 li:hover a {
      	color: black;
      	text-shadow: 0.1em 0.1em 0.2em grey;
      	-webkit-transform: rotate(360deg);
      	-moz-transform: rotate(360deg);
      	-o-transform: rotate(360deg);
     
      	-webkit-transition: 1s ease-in;
      	-moz-transition: 1s ease-in;
      	-o-transition: 1s ease-in;
    }
    Merci pour votre aide !

    Sam

  7. #7
    Membre du Club
    Profil pro
    Inscrit en
    Février 2011
    Messages
    253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 253
    Points : 56
    Points
    56
    Par défaut
    La forme de trapeze est réalisable avec :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    -webkit-transform:perspective(600) rotateY(45deg) ;
    je crois bien que c'est Jérôme Debray qui en parle

    seulement elle n'est valable a ce jour que sur (webkit: chrome et safari)

    moi même je cherche a savoir s'il est possible de contourner le compatibilité navigateur pour firefox, opera et IE9 (et surtout savoir si ceux-ci vont adopter cette propriété

    voici mon post:
    http://www.developpez.net/forums/d11...m-perspective/

Discussions similaires

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

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