cousineaug Posted March 6, 2011 Share Posted March 6, 2011 I have the following <img style="-webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-o-transform: rotate(20deg);"src="image.jpg" alt="" title="" width=152 height=78 border=0> and it works finer in Chrome, Opera Safari and Firefox. Which one is missing?oh yes it seems IE can only rotate 90 degrees at a time.I also came across <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image transform="rotate(11,30,90)" width="151" height="78" xlink:href="image.jpg"/> </svg> And this works in IE and 2 others. So the question is, how can I rotate an image less than 90 degrees in all 5 browsers?If the latter was css I could conditional "if ie use this style" . . . but now I am in unchartered territory.I don't want to rotate the image in an editor because it will have a square frame with a rotated image inside it.Guy Link to comment Share on other sites More sharing options...
dsonesuk Posted March 6, 2011 Share Posted March 6, 2011 Are you sure you can't use IE conditional to run rotate image svg code for IE only, I've used it to run javascript code for IE6 only ul list menu before, so it should in theory be able to do the same for svg coding. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 7, 2011 Share Posted March 7, 2011 have you tried using -ms-transform.htc, (google and download), then use reference to file as below with ms-transform:rotate(20deg);<img style="behavior:url(-ms-transform.htc);-webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform:rotate(20deg); -o-transform: rotate(20deg);" src="image.jpg" alt="" title="" width=152 height=78 border=0> Link to comment Share on other sites More sharing options...
cousineaug Posted March 7, 2011 Author Share Posted March 7, 2011 Are you sure you can't use IE conditional to run rotate image svg code for IE only, I've used it to run javascript code for IE6 only ul list menu before, so it should in theory be able to do the same for svg coding.ok so here goes. I can hide the IE specific from other browsers, but hiding the other browser stuff from IE was harder. It seems to validate ok... pre-test ok in 5 browsers. The trick was to create an impossible condition so IE ignores the first statement. Perhaps I should say IE version less than 2 which should last forever.<div class="cavendish" ><!--[if IE]><![if gt IE 9]><![endif]--><img style="-webkit-transform: rotate(20deg); -moz-transform: rotate(20deg);-o-transform: rotate(20deg);"src="images/b-beach.jpg" alt="Cavendish Beach P.E.I." title="Cavendish Beach P.E.I." width=152 height=78 border=0><!--[if IE]><![endif]><![endif]--><!--[if IE]><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image transform="rotate(11,30,90)" width="151" height="78" xlink:href="images/b-beach.jpg"/><![endif]--></div> thanks for the hint DSONE...this hack seems to work.seems we collided. I'll check out that HTC tomorrow. Would be a cleaner solution.Guy Link to comment Share on other sites More sharing options...
dsonesuk Posted March 7, 2011 Share Posted March 7, 2011 Why not use if not IE (if !IE) and if IE<div class="cavendish" ><!--[if !IE]><!--><img style="-webkit-transform: rotate(20deg); -moz-transform: rotate(20deg);-o-transform: rotate(20deg);"src="images/b-beach.jpg" alt="Cavendish Beach P.E.I." title="Cavendish Beach P.E.I." width=152 height=78 border=0><!--<![endif]--><!--[if IE]><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image transform="rotate(11,30,90)" width="151" height="78" xlink:href="images/b-beach.jpg"/><![endif]--></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.