CSS3 Gire la imagen que preserva su posición superior izquierda
Pregunta
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);">
Solución
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);
}