css3 rotate image preserving its left top position -


I have an image which can vary in width and height, I rotate the image that preserves initial top and left positions I want to be able to I am using the transform: rotate (270deg); The problem is that the image is moving on the left. I know that conversion can solve the basic CSS property problem, but how do the top left values ​​be calculated for this property? Maybe there is a formula for this? The example is showing that the image is moved to the left, from the initial left position.

  & lt; img src = "https://dl.dropboxusercontent.com/u/31490359/e001420737da443b0fb75abfaddc5f22.jpg" style = "transform: rotate (270deg); -webkit-transform: rotate (270 °); -mms-transform: Rotate (270 degrees); "& gt;  

this rotation -

note : Image size has been modified due to improved visibility!

html

  & lt; Img src = "https: // dl.dropboxusercontent.com/u/31490359/e001420737da443b0fb75abfaddc5f22.jpg">  

css

  img {width: 40%; Height: auto; Status: Completed; Top: 100px; Left: 50px; Transition: All 2s ease; } Img: Hover {conversion: rotate (270deg); Webkit-transform: to rotate (270deg); MS-Consequently: Rotate (270deg); }  

Comments

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -