I want to read Exif information and rotate them in my HTML file. I did like this. And it could rotate just fine, but when it comes two or more picture, they don't give my pictures enough space. Could I let them no overlapping 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>
Thank you very much.
You can specify a height
for the division almost same as image's width.
Demo here
Or you can specify a margin-bottom
to the divisions.
Demo here
Cheers!!!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With