css3 rotate image preserving its left top position
Question
I have an image which width and height can vary. I want to be able to rotate image preserving initial top and left positions. I'm using transform: rotate(270deg); The problem is that the image is moving to the left. I know that transform-origin css property can solve the issue, but how to calculate the top left values for this property? Maybe there is a formula for that? Here is the example showing that image is moved to the left from the initial left position. 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);">
Solution
This is the rotation - Rotate animation
note : size of image has been modified because of better visibility!
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);
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow