I am not at all an expert in css. I finally found the way to align my rotated image to the top left of its container thanks to the indication in this post: CSS: rotate image and align top left
Unfortunately I can not figure out on how to have the text I have below the image in the same container to move after the image has rotated. In my case I have a portrait image with a caption below it. I want to rotate the image to landscape layout and have the caption to move below the image, while it remains where it was when the image was in the portrait layout. Any suggestion? Thank you very much! PS. An additional issue might also be that my actual image is in a td element of a table but I hope that the solution I will find (if!) with DIVs will be applicable!
div:hover #myimage {
-webkit-transform: translateY(-100%) rotate(90deg); /* Safari */
-moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */
/*-moz-transform-origin: right top; */
-ms-transform: translateY(-100%) rotate(90deg); /* IE9 */
-o-transform: translateY(-100%) rotate(90deg); /* Opera */
transform: translateY(-100%) rotate(90deg); /* W3C */
-webkit-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
}<div style="border: 1px solid red;">
<img id="myimage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Coenagrion_puella_Luc_Viatour.jpg/205px-Coenagrion_puella_Luc_Viatour.jpg" style="border: 3px solid silver;" />
<div>
Damselfly
</div>
</div>