CSS3 Gire la imagen que preserva su posición superior izquierda

Question

Tengo una imagen que el ancho y la altura pueden variar.Quiero poder girar la imagen que conserva las posiciones iniciales y izquierda iniciales.Estoy usando Transform: Gire (270DEG); El problema es que la imagen se está moviendo hacia la izquierda.Sé que la propiedad CSS de origen transformada puede resolver el problema, ¡pero cómo calcular los valores superiores a la izquierda para esta propiedad?Tal vez hay una fórmula para eso? Aquí está el ejemplo que muestra que la imagen se mueve hacia la izquierda desde la posición inicial izquierda. 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

Esta es la rotación - rotate animation

note : el tamaño de la imagen ha sido modificado debido a una mejor visibilidad!

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