rotation et diminution

Version imprimable

23/05/2011, 21h56
suprateam

rotation et diminution

Bonsoir,
Je viens demander de l'aide car après de multiple recherche je n'ai pas trouvé ma réponse.

Le contexte est, j'ai une image avec comme id="pic" c'est une bouteille :D

Et je souhaite suivant ou je suis dans mon site lui appliquer une rotation de -90 donc la passer à l'horizontal et aussi diminuer sa hauteur (ou largeur d'origine) à 60 pixel tout en gardant les proportion.

Et le tout sur ie et firefox !!!

Si quelqu'un peut m'apporter ses lumières ?

Merci
24/05/2011, 11h06
SpaceFrog

javascript ne permet par la rotation directement
il y a bien un plugin jquery mais je ne me demande si il n'est pas backed par du flash ...
Ou bien encore regarde du coté de svg et transform ?
Sinon tu peux passer par un canvas ou flash ...
24/05/2011, 11h56
psychomatt

Pourquoi ne pas gérer simplement 2 images différentes (ou un sprite CSS mais l'idée est la même) ?
24/05/2011, 12h01
RomainVALERI

Citation:

Envoyé par psychomatt

Pourquoi ne pas gérer simplement 2 images différentes (ou un sprite CSS mais l'idée est la même) ?

Oui je pensais plutot à ça aussi, parce qu'à l'exécution comme l'évoque SF ça risque d'apporter pas mal de contraintes... ^^

et une rotation a 270° (-90°) en javascript ca donne sa

Code:

1
2
3
4
5
6
7
8
 
var el=document.getElementById("monelement")
 
el.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'
el.style.MozTransform='rotate(270deg)';
el.style.WebkitTransform='rotate(270deg)';
el.style.OTransform='rotate(270deg)';
el.style.transform='rotate(270deg)';

24/05/2011, 13h38
RomainVALERI

Citation:

Envoyé par mekal

et une rotation a 270° (-90°) en javascript ca donne sa

Code:

...

8O j'adore ^^

En compatibilité sur les différentes browsers/versions plus ou moins anciennes, ça passe correct ou pas ? (là je suis au boulot, je testerai ce soir mais c'est par curiosité ^^)

(Bon ben j'ai pas aidé grand monde aujourd'hui mais... j'en aurai appris deux tonnes :aie:)

Citation:
Envoyé par mekal
et une rotation a 270° (-90°) en javascript ca donne sa
Code:

1 2 3 4 5 6 7 8 var el=document.getElementById("monelement") el.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=3)' el.style.MozTransform='rotate(270deg)'; el.style.WebkitTransform='rotate(270deg)'; el.style.OTransform='rotate(270deg)'; el.style.transform='rotate(270deg)';
Bonsoir,
Et d'abord merci à tous pour votre participation.

Effectivement j'avais fait des tests avec le css qui arrive à réaliser ce que tu suggéres mais le problème est que mon image doit avoir une largeur fixe lors de la bascule/rrotation fait qu'il perd cette affectation de largeur qui devrait devenir hauteuret donc me décale tt sur ma page !

Je sais si je suis clair ...

24/05/2011, 20h39
suprateam

Citation:

Envoyé par suprateam

Bonsoir,
Et d'abord merci à tous pour votre participation.

Effectivement j'avais fait des tests avec le css qui arrive à réaliser ce que tu suggéres mais le problème est que mon image doit avoir une largeur fixe lors de la bascule/rrotation fait qu'il perd cette affectation de largeur qui devrait devenir hauteuret donc me décale tt sur ma page !

Je sais si je suis clair ...

Et donc je cherche rotation plus changement de la hauteur en gardant les proportion ... Pas évident ... Et pas 2 images car je fais du dynamique:cry:
24/05/2011, 20h45
suprateam

Citation:

Envoyé par SpaceFrog

javascript ne permet par la rotation directement
il y a bien un plugin jquery mais je ne me demande si il n'est pas backed par du flash ...
Ou bien encore regarde du coté de svg et transform ?
Sinon tu peux passer par un canvas ou flash ...

Oui mais comment de maniéré dynamique c'est à dire je prend aléatoire une photo je la retourne et la redimensionne ?
25/05/2011, 11h47
bewidia

A part un traitement coté serveur, je ne vois pas. Selon les paramètres fournis (dimension, rotation), le serveur prend l'image, la modifie et renvoie un flux image.