JeuWeb Créez votre jeu par navigateur !

**Ter Rowan** · (Modification du message : 09-10-2011, 02:47 PM par Sephi-Chan.)

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

}

Wells · 14-10-2011, 03:47 PM

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 Wink

**Sephi-Chan** · 14-10-2011, 03:54 PM

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

**Ter Rowan** · 14-10-2011, 05:05 PM

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

**Xenos** · 14-10-2011, 06:00 PM

'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 Smile

djidi · 14-10-2011, 06:13 PM

En définissant la largeur dans #Rotate:hover, ca fonctionne.

**Ter Rowan** · 14-10-2011, 07:43 PM

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

**Sephi-Chan** · 14-10-2011, 07:49 PM

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

Myrina · 15-10-2011, 08:54 PM

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.

**Ter Rowan** · 22-10-2011, 11:05 AM

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

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	Vectoriser des images et travailler des images vectorielles	L'Omniscient	8	3 634	01-06-2016, 02:35 PM Dernier message: @lucard
	[JS] recherche module/librairie/conseil transformation d image	Ter Rowan	6	3 906	02-08-2012, 02:09 PM Dernier message: Maks
	Interface CSS3 / IE 9	Wells	31	9 477	03-02-2012, 01:47 AM Dernier message: Wells
	Bbcode [IMG] + transformation des URL texte	Catar4x	5	2 261	18-01-2011, 03:54 PM Dernier message: Jeckel
	CSS3 et HTML 5 ?	Thib4s	21	11 174	27-07-2010, 10:55 PM Dernier message: Sephi-Chan