[CSS3] Transformation d'images - Version imprimable +- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org) +-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38) +--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51) +--- Sujet : [CSS3] Transformation d'images (/showthread.php?tid=5734) |
[CSS3] Transformation d'images - Ter Rowan - 09-10-2011 Bonjour, je commence à faire quelques essais sur HTML5+CSS3 et j'ai quelques questions: (*) je cherche à faire une rotation d'image celle ci marche bien à une nuance prêt, l'image se décale vers le haut, au lieu de rester dans le "flux" (pour montrer le truc dans l'exemple, j'ai mis la transformation uniquement en hover, et non directement) (*) j'ai réussi à pencher (avec le "skew") l'image, par contre je n'arrive pas à combiner le skew avec rotate (c'est peut être très simple mais je n'ai pas trouvé grand chose) (*) Enfin, si jamais vous avez un site (j'ai pas trouvé ce que je voulais sur Alsacréation) ou un bouquin intéressant et fouillé sur ce point, ça peut m'intéresser (de préférence en français) merci de vos aides / avis ! voici mes codes : le html
et le CSS
RE: [CSS3] Transformation d'images - Wells - 14-10-2011 Je suis en partit HS, mais j’espère que tu es conscient que le CSS3 est inutilisable en l’état vue que IE8- ne le gère pas, ou pas entièrement. Je préfère que tu le sache avant de te prendre la tête pour rien RE: [CSS3] Transformation d'images - Sephi-Chan - 14-10-2011 Si on fait des applications pour mobile, ça n'est pas un problème. Si on choisit d'ignorer les sous-navigateurs aussi. Tout le monde n'est pas aussi frileux pour prendre ce genre de décisions. RE: [CSS3] Transformation d'images - Ter Rowan - 14-10-2011 erf je croyais que j'allais avoir une solution ^^ bien sûr j'en suis conscient, et je ne dis pas que ma solution sera basé sur css3/html5, peut être même pas sur html tout court :p mais ça me paraît intéressant d'essayer des cas pratiques dans tous les cas on a aucun type un peu péchu sur ces technos ici ? faut laisser tomber ruby les gars, passer au html :p RE: [CSS3] Transformation d'images - Xenos - 14-10-2011 'manque une screen coco, c'est pas facile de savoir quel est le bugg que donne un code CSS, de présentation/mise en page, sans une image du rendu réel, voir une du rendu attendu & pour CSS3, je plussoie: il faut l'employer (imaginez la tête des pauvres gens du W3C si on s'en tappe des nouvelles normes qu'ils suent à pondre?!), mais il ne faut pas que cet emploi soit indispensable (cad que le site doit rester lisible ou au moins fonctionnel même si le CSS3 passe pas). Enfin, c'est mon avis. Bref, pour de l'aide, ok, mais pas sans cette screenshot du résultat réel RE: [CSS3] Transformation d'images - djidi - 14-10-2011 En définissant la largeur dans #Rotate:hover, ca fonctionne. RE: [CSS3] Transformation d'images - Ter Rowan - 14-10-2011 (14-10-2011, 06:13 PM)djidi a écrit : En définissant la largeur dans #Rotate:hover, ca fonctionne. ah ben tiens, oui avec un width ca marche correctement, c'est quand mêmevachement bizarre ça ? quel rapport entre le positionnement et la largeur ? bon on a quand même avancé ^^ merci djidi et la combinaison des deux, je pense qu'il manque une instruction css, car la il doit prendre la derniere valeur de transform. RE: [CSS3] Transformation d'images - Sephi-Chan - 14-10-2011 Je pense que c'est le même mécanisme qui celui qui fait qu'un bloc avec margin: auto ne sera pas centré s'il n'a pas une taille explicite. RE: [CSS3] Transformation d'images - Myrina - 15-10-2011 Sinon, tu as la possibilité d'utiliser le SVG pour afficher ton image transformée. En effet, dans la CSS pour SVG, la transformation Rotate peut avoir deux paramètres supplémentaires pour spécifier le centre de la rotation. RE: [CSS3] Transformation d'images - Ter Rowan - 22-10-2011 bon, en passant mettre un costume au pressing (et oui ma vie est palpitante), je suis tombé sur un bouquin de css qui m'a donné la solution à mon dernier problème pour combiner deux effets transform, il faut les mettre sur une même ligne ainsi, au lieu de faire :
il faut faire :
j'ai plus qu' à trouver la transformation qui transforme un rectangle en réduisant un de ces côtés seulement |