CSS3 Tourner l'image en préservant sa position supérieure gauche

Question

J'ai une image que la largeur et la hauteur peuvent varier.Je veux pouvoir faire pivoter l'image en préservant les positions initiales supérieures et gauche.J'utilise la transformation: tournez (270deg); Le problème est que l'image se déplace vers la gauche.Je sais que la propriété Transform-Origin CSS peut résoudre le problème, mais comment calculer les valeurs supérieures gauche de cette propriété?Peut-être qu'il y a une formule pour ça? Voici l'exemple montrant que l'image est déplacée vers la gauche de la position gauche initiale. http://jsfiddle.net/h48ca/2/

<img src="https://dl.dropboxusercontent.com/u/31490359/e001420737da443b0fb75abfaddc5f22.jpg" style="transform: rotate(270deg); -webkit-transform: rotate(270deg); -ms-transform:rotate(270deg);">

Answer 1

Ceci est la rotation - Animation rotative

note : la taille de l'image a été modifiée en raison d'une meilleure visibilité!

html

<img src="https://dl.dropboxusercontent.com/u/31490359/e001420737da443b0fb75abfaddc5f22.jpg">

CSS

img{
    width:40%;
    height:auto;
    position:absolute;
    top:100px;
    left:50px;
    transition:all 2s ease;
}

img:hover {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -ms-transform:rotate(270deg);
}