CSS3 Вращайте изображение, сохраняющее его левое верхнее положение

Question

У меня есть изображение, которую ширина и высота могут варьироваться.Я хочу, чтобы иметь возможность вращать изображение, сохраняющие начальные верхние и левые позиции.Я использую преобразование: вращать (270DEG); Проблема в том, что изображение движется влево.Я знаю, что свойство CSS преобразования-происхождения может решить проблему, но как рассчитать верхние левые значения для этого свойства?Может быть, есть формула для этого? Вот пример, показывающий, что изображение перемещается влево из исходного левого положения. 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

Это вращение - вращается анимация

Примечание : размер изображения был изменен из-за лучшей видимости!

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

.