html - CSS. Rotated image on the mobile screens -

I rotate the image (it should be rotated with CSS) I need to display it on full screen for any type of mobile device (so I can not use fixed width and fixed margins here). And the image should have 10px margins from each side.

I can not do this, because the font function has added an invisible difference (left and right) for the image sides. You can see this effect on jsfiddle, the image is not placed on the left edge of the screen.

Any idea how this can be done? Thanks

  & lt; Div & gt; & Lt; Img src = "http://i.imgur.com/sakTcZr.jpg" /> & Lt; / Div & gt; Img {-moz-transformform: rotate (-90 degrees); -webkit- Convert: Rotate (-90deg); MS-Consequently: Rotate (-90deg); Conversion: to rotate (-90 degrees); }   
 
 
 I changed ur bella now it revolves around small devices. Just change the size of your html bilal screen and you can effect it.  
 Solution:  
  @ Media (max-width: 767px) {img {-moz-transform: (-90deg) rotate; -webkit- Convert: Rotate (-90deg); MS-Consequently: Rotate (-90deg); Conversion: to rotate (-90 degrees); }}