You are invited to Log in or Register a free Frihost Account!

Rotate images using css?

Chris Tiaens
Is it possible to rotate an image in a certain angle using css or javascript? If not, can I do that in an other way without using graphic applications like photoshop/firefox?
Stubru Freak
Paint (it is a graphic application but it's free, if you have another OS it mostly has a similar program included)
Other server-side languages (ASP, JSP (server-side Java), ...)

Maybe you can do this in javascript too but not sure
You can do it client-side with SVG.
Or server side, with PHP or example, as said Stubru Freak.
Chris Tiaens
Can you tell me something more about the SVG-thing? I know what it stands for and that stuff but I don't know how to use it...

I really prefer not to use images of rotated pictures, because I'd like to use it in a menu an I want the items to be read from a xml-file using some php work... it's kinda long to explain, but I have my reasons for not using applications.
SVG, as you know, is used for describing vector graphics in XML (and allows you to include raster (PNG and JPEG at the very least) in the image).

Basic SVG code, which takes an image 100 pixels wide, 100 pixels tall, and rotates it 90 degrees:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "">
<svg width="100" height="100" version="1.1" xmlns="" xmlns:xlink="">
<image transform="rotate(90,50,50)" width="100" height="100" xlink:href="myimage.png"/>

The important part there is the <image> element (the rest is necessary declaration of XML doctype, namespaces etc.). It describes the width, the height, the URL of the image and the transformation to make - in this case, "rotate 90 degrees around an axis placed at (x,y): (50,50).

Of course, the main use for SVG isn't rotating raster images, but rather describing (dynamic) vector graphics. Using the usual XML DOM (from Javascript), you can modify the image - and SVG also supports some animation elements internally.

SVG can be embedded in HTML using the <embed> element (as used for QuickTime, Flash etc.), but that's non-W3C, the <object> element (also as used for QuickTime, Flash etc.), but that's not supported by IE using Adobe's SVG reader, as far as I recall. Or you can add it through IFRAMEs, simply pointing the src of the IFRAME to the SVG file.

I'm sure have a good tutorial on SVG as always Wink

That said, it's not really a viable solution for rotating images client-side. The only browser that supports SVG natively is Firefox 1.5. All other browsers will require a plugin that no non-technical users have installed yet... So, the options:

- CSS doesn't support rotating images, unless you count IE's proprietary CSS filters.
- Javascript doesn't support transforming images at all (except scaling) - unless, again, you coun't proprietary IE extensions.
- SVG isn't widely supported. Let's hope it will be soon, because it really is useful. Smile
- Flash. Yep, I hate to admit it, but Flash is probably the best alternative client-side. The user base is large and it's easy to do. If you can live with the side effects.

- Server-side. The one I'd use. All server-based scripting languages have some kind of image library (although it may not be installed). The GD library for PHP (installed on frihost) etc. allows server-side manipulation of images through PHP. You don't need to upload all the rotated images, just rotate a base image on the server and send the result to the browser. Smile
Chris Tiaens
Thank you very much! I'll try the php-tric and see, otherwise I'll use flash.
Related topics
W3C buttons without images
[tutor] How to protect images without htaccess using PHP
Positioning images with HTML
CSS Problems + Cache control
Howto centre an object vertical using css?
Includ Images using PHP.
CSS template - IE trick to use min-height
CSS Help...
Firefox vs IE ?
Tool to create shadow effect for an Image using CSS
[Resolved]Using css to create a link.
How change the property TARGET of tag A (LINK) using CSS?
How change the background-image of a page using CSS?
IE8 not allowing new random image on each page (PHP and CSS)
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

© 2005-2011 Frihost, forums powered by phpBB.