+- 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
<!DOCTYPE html>
<html lang="fr">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h4>Image normale</h4>
<img src="image.jpg">
<h4>Image avec rotate</h4>
<div id='Rotate'><img src="image.jpg"></div>
<h4>Image avec skew</h4>
<div id='Skew'><img src="image.jpg"></div>
<h4>Image avec skew + rotate</h4>
<div id='SkewRotate'><img src="image.jpg"></div>
</body>
</html>
et le CSS
body
{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#3b3036;
background-color: #ccc;
}
#Rotate:hover
{
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
#Skew
{
transform: skew(-25deg);
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
}
#SkewRotate
{
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: skew(-25deg);
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
}
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 :
#SkewRotate
{
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: skew(-25deg);
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
}
il faut faire :
#SkewRotate
{
transform: rotate(15deg) skew(-25deg);
-moz-transform: rotate(15deg) skew(-25deg);
-webkit-transform: rotate(15deg) skew(-25deg);
width: 100px; /* le width permet de "fixer" l'image a sa place*/
}
j'ai plus qu' à trouver la transformation qui transforme un rectangle en réduisant un de ces côtés seulement