How to rotate an image without overlapping?

Question

How to rotate an image without overlapping?

I want to read Exif information and rotate them in my HTML file. I liked it. And it can rotate very well, but when two or more pictures come, they do not give my pictures enough space. Can I let them not overlap and rotate them?

<HTML><HEAD>
<style type="text/css">
DIV.rotate {
-webkit-transform:rotate(30deg);
}</style>
</HEAD><BODY>
<div><p><DIV class="rotate"><img 
src="http://taufanlubis.files.wordpress.com/2008/05/google-picasa01.png">
</p></div>
<div><p><DIV class="rotate"><img 
src="http://taufanlubis.files.wordpress.com/2008/05/google-picasa01.png">
</p></div>
<div><p><DIV class="rotate"><img 
src="http://taufanlubis.files.wordpress.com/2008/05/google-picasa01.png">
</p></div>
</BODY></HTML>