Comment faire pivoter une image à l'aide de la solution côté client

Je me demande s'il est possible de faire pivoter une image dynamiquement ou d'inverser une image à l'aide d'une solution côté client? Je me fous si c'est javascript, jquery plugin, css. Je me demandais juste s'il y avait un moyen de le faire dynamiquement du côté client plutôt que d'avoir à écrire du code côté serveur à faire pour chaque image que je peux faire.Comment faire pivoter une image à l'aide de la solution côté client

J'ai essayé de chercher sur Google pour différents mots clés mais je n'ai rien trouvé.

EDIT: Je cherche une solution qui ne nécessite rien de HTML 5.

Source

2010-08-02 spinon

dup: http://stackoverflow.com/questions/968642/rotate-image-clockwise-or-anticlockwise-inside-a-div-using-javascript –

Permettez-moi de clarifier un peu parce que je ne veux pas utiliser HTML 5 – spinon

Firefox, soutiennent Safari et Opera ceci:

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
transform: rotate(-90deg);

vous pouvez aussi le faire dans IE8, peut-être encore 7 (?):

position: absolute; 
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

faites pivoter un élément en utilisant JS:

var deg = 90 
$('element').style.MozTransform = 'rotate(' + deg + 'deg)'; 
$('element').style.WebkitTransform = 'rotate(' + deg + 'deg)';

modifier:

wow, selon http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx la rotation fonctionne pour IE 5.5!

Source

2010-08-02 07:26:35 koko

cela a l'air génial. Je vais essayer ça demain et voir comment ça se passe. – spinon

+1 pour la prise en charge de plusieurs navigateurs et 'filter: progid: DXImageTransform.Microsoft.BasicImage (rotation = 3);' –

Vous pouvez le faire en utilisant l'élément de toile, comme le montre here. Je ne suis pas sûr à 100% que tous les navigateurs le supportent déjà. Il fait partie de HTML5 (en savoir plus sur le Wikipedia), donc FF, Safari et Chrome le supportent. Je ne suis pas sûr de IE8.

Source

2010-08-02 05:52:13

merci pour la réponse mais je cherche vraiment à éviter d'utiliser du canvas si possible. Pas tout à fait sûr que cela puisse être, mais c'est ce que j'essaie de comprendre. J'ai essayé de chercher partout sur Google et SO et n'ai encore rien trouvé pour cela. Alors j'ai pensé que j'essaierais de poser une question pour voir si quelqu'un a déjà rencontré ça auparavant. – spinon

Solution javascript très intéressante: http://www.stableflow.com/downloads/jquery-plugins/360-degrees-product-view/ Imaginez que vous utilisez un magasin ou un blog et que vous présentez l'utilisateur avec vos produits. La solution vous permet d'économiser de l'espace et de présenter la vue des produits sous une forme très réaliste grâce au script. Il permet d'oublier le flash (qui n'est toujours pas supporté par tous les appareils mobiles). Ce que vous devez l'utiliser est:

Télécharger le plugin gratuit (utilisez le lien ci-dessus)
Configuration du plug-in en suivant les instructions
Créer et ajouter une série d'images pour chaque produit (plus d'images mieux effet de rotation, vous obtiendrez)
Suivez a suscité un intérêt pour vos produits auprès des utilisateurs

Il a vraiment travaillé pour moi. Testé sur mobile Android (lg p500), iPad et iPod touch ainsi.

Source

2011-11-11 10:48:06 Artem

Comment faire pivoter une image à l'aide de la solution côté client

Répondre

Questions connexes