Just a tricky question, may help others too

**shawn32105** · Mar 27, 2005 10:28

How to flip a graphic image horizontally, vertically or at a specified angle. e.g. I have an arrow that points left and I want to use the same image (save download time) at another place that should point to right (horizontal flip) and so on.... Any ideas....................Please let me know as it might help a lot of people saving download time.

**fillup07** · Mar 27, 2005 11:14

No ASP solution is going to help you saving download time. It's possbile using components like ASPJpeg to rotate an image, but this still requires the end user to download separate images.

It may be possible to find a JavaScript solution... I am not sure.

**jimfraser** · Mar 28, 2005 04:59

You can do it in IE using filters:
http://msdn.microsoft.com/workshop/s...BasicImage.htm

**Thing** · Mar 28, 2005 06:30

How big is the arrow? I can't imagine a small arrow gif being any larger than a few hundred bytes.

**shawn32105** · Apr 5, 2005 06:41

Thanks Jim. I saw it...can we use it for the purpose I said earlier.

Hi Thing! The arrow is just an example. if this thing could be done you could do wonders with one single image and by just rotating it through various angles.....Any ideas!!!

**jimfraser** · Apr 5, 2005 07:00

This will only work in IE:

Code:

<html>
<head>

<style type="text/css">
.rotate90 {
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.rotate180 {
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rotate270 {
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<title>image flip test</title>
</head>
<body>
<div id="main">
<img src="http://www.sitepoint.com/forums/images/buttons/quote.gif" />
<img class="rotate90" src="http://www.sitepoint.com/forums/images/buttons/quote.gif" />
<img class="rotate180" src="http://www.sitepoint.com/forums/images/buttons/quote.gif" />
<img class="rotate270" src="http://www.sitepoint.com/forums/images/buttons/quote.gif" />
</div>
</body>
</html>

**dhtmlgod** · Apr 5, 2005 07:04

If you used ASP to flip it, then it would be treated as a different image and you wouldn't have any benefit over creating another image! The CSS is the only real way with the same image, but then your stuck with it only working with IE. I would suggest simply creating the other image