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
Post a Comment