CSS3 image rotation and reposition to fit in div
- by blid
I'll start with JS Fiddle:
http://jsfiddle.net/zy2xy/4/
<div id="page" style="position: relative; background: #ccc; width: 500px; height: 600px;">
<div id="container" style="top: 50px; left: 100px; width: 200px; height: 200px; position: absolute; background: #fff;">
<img src="http://lorempixel.com/200/100/">
</div>
</div>?????????
I've got a whole page div #page, and inside that another div #container positioned absolute against #page.
What I want to achieve, is to rotate image inside it 90deg, 180deg or 270deg but always move that image to top left corner of #container.
I tried a little bit with transform-origin but I couldn't find any solution.
