I've spent most of the day on this, so I thought I would share. Most people don't know this, but CSS3 has some *really* cool stuff coming - auto-rounded corners, gradients, and.... DIV rotations! Unfortunately, it will be about 5 years before any of this becomes mainstream. IE8 only has the very beginnings of CSS3 support.
So is there any way to get this on current browsers? Yes! The fine folks at CSS3Please.com have given us a way to do some of these cool effects using existing CSS. If you just want, just go their, edit the stylesheet on the web page (yes! it is editable!), and copy/paste the resulting CSS into your CSS file.
But what if you want dynamic rotation? Well, I looked at the CSS3Please source code, and figured out how it was all being calculated. The IE6, IE7, and IE8 part is the worst, because it relies on a DirectX Matrix transform operation (isn't Internet Explorer always fun to work with?). Not superfun, but do-able. However, to get this calculated, we will need a Matrix library. So, first, download and install the sylvester javascript library. Then, put this javascript into your page:
<script src="sylvester.js"></script>
<script type="text/javascript">
function degreesToRadians(num) {
return (num) * Math.PI / 180;
}
function createIEMatrixString(M) {
return 'M11=' + M.e(1, 1) + ', M12=' + M.e(1,2) + ', M21=' + M.e(2,1) + ', M22=' + M.e(2,2);
}
function rotateElement(e, deg) {
deg_str = deg + "";
rotate_transform = "rotate(" + deg + "deg)";
matrix_str = createIEMatrixString(Matrix.Rotation(degreesToRadians(deg)));
filter_str = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', " + matrix_str + ")";
e.style["rotation"] = deg_str + "deg"; // CSS3
e.style.MozTransform = rotate_transform; // Moz
e.style.OTransform = rotate_transform; // Opera
e.style.WebkitTransform = rotate_transform; // Webkit/Safari/Chrome
e.style.filter = filter_str; // IE 6/7
e.style.MsFilter = filter_str; // IE 8
e.style["zoom"] = "1"; // ??? Probably IEs
}
</script>
Now, you can just do:
rotateElement(document.getElementById("whatever"), 20);
And that will rotate the element. Note that this *sets* the rotation, so if I do this several times it will only keep the rotation at what I set it to, it won't keep on adding rotations.
Anyway, a little bit of work, a little bit of code for your client to download, but it works.
UPDATE - just found this jquery plugin that *might* do something similar, but haven't looked at it closely yet.
I often have to refer people to my old IBM DeveloperWorks papers, but it always takes so long to find them. Therefore, I am going to post links to them all here to make them easier for me (and you) to find. The dates were pulled from the IBM site, and some of them seem incoherent. If I find the true release dates of the papers I'll put them in later.
Series 1: Theoretical Computer Science for Practical Computer Programmers
In this series, I introduced a lot of material that is usually only studied in theoretical computer science, and showed how it could be useful for practical programming:
Series 2: Metaprogramming
Metaprogramming is one of my favorite subjects. In this series I give an introduction to several kinds of metaprogramming and how they are done. I wish I knew ruby when I wrote these, as Ruby's metaprogramming system is just awesome!
Assembly Language for the Power Architecture Series
When I got a PowerPC Mac I wanted to learn PowerPC assembly language, but didn't have time. I thought, "hey, if I can convince IBM to pay me to write about it, that would give me a good excuse to learn it". That birthed this article series:
PlayStation 3 Programming with the Cell Broadband Engine
IBM's Cell processor (called the Cell Broadband Engine) was the driving force behind the PS3. It had a main processor and eight vector processors (each vector processor was a full-blown processor, though very limited). Given the right workload, and the processor would scream. However, if it wasn't programmed carefully, it would actually be slower than most other processors. This is especially difficult because the vector processors actually used a different assembly language with a different memory model than the main processor. This series walks a programmer through everything they need to know, from installing Linux on their PS3 to writing, complling, and linking their code.
There was supposed to be a final paper where I applied everything to a scientific application, but I got worn out by the end and just had to stop.