Can there be standard code I'm able to use to rotate pictures during my HTML website?

CSS3 includes a transform style, which enables you to definitely rotate any HTML element. You'd utilize it such as this:

.myelement {

This will operate in the most recent versions on most browsers (Opera 5, Chrome 13, IE9, etc). However, older browsers may have issues.

Some older browsers require vendor prefixes, so you'd need -moz-transform and -webkit-transform, etc.

Older versions of IE did not offer the transform style whatsoever, however they will have a filter attribute which may be used rather. Regrettably, IE's filter syntax for rotation is quite complex. You need to specify a matrix transform, using the values in radians instead of levels, so it may be a little obscure.

For any 45 degree rotation, you'd make use of the following code:

.myelement {
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand');

You'll observe that IE6 and IE7 require filter style, whereas IE8 requires -ms-filter (with slightly different syntax).

Instead of explain it here, I'll show you a webpage where it's described at length:

The last note of caution around the filter style: The IE6/7 syntax is invalid CSS (because of the colon after progid, amongst other things). I've come across it really cause other browsers (particularly Opera 3.6) to neglect to parse the whole stylesheet. Because of this, I suggest utilizing it inside a separate IE-specific stylesheet which you'll exclude entirely using their company browsers.

If you wish to get it done via Javascript, I'd recommend utilizing a JQuery connect. This can take away the complexity of needing to write separate code for the different browsers. See here for more information:

Hope that can help.

You rotate images either around the client-side (inside the browser) or server-side (inside your server after which re-send the look towards the browser).

To rotate around the browser, see Spudley's answer.

The most popular way around the server is by using imagemagick Nearly all web languages/frameworks include bindings make it possible for easy utilization of image magick. Eg here's the PHP version.

A list for a lot of different languages.

You should use Ajax strategies to rotate the look for that user without needing a webpage refresh.

In my opinion the only real support for rotating HTML elements is supplied by CSS transforms.

These were introduced by the WebKit team (I believe):

There's now support in other browsers too: