Initially I’d planned to create the site template first, and document that, but this seemed more interesting. After reading this article I thought I’d have a dabble and try it myself.
So, here’s some boxes. They may, or may not do something when you mouseover them, it depends on your browser…
The CSS i’ve used for the above is as follows:
<style type="text/css" >
.spinbox {
float: left;
margin: 1em 1em;
width: 6em;
height: 4em;
border: 2px solid red;
line-height: 4em;
text-align: center;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-ms-transition: all 1s ease-in;
transition: all 1s ease-in;
}
.spinbox:hover{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
background-color: green;
color: yellow;
}
</style >
I added the relevant browser prefixes, so I could do a little comparison between browsers to see what would happen.
First up, Chrome beta V5.0. Running on webkit it did everything I expected it would – as it should as these were created with webkit in mind. The box span, and changed colour, and then returned to its initial state without a hitch.
Next, Firefox V3.7 alpha 4. It doesn’t transition the transform so the box just flips. It does apply a transition to the colours however. It seems to have some problems with the text on the transform as well, it often seems to reflect it the wrong way, reversing some letters, but not others, and moving it off axis. Very weird. It also put a single pixel white line between the background and the border at the top of the rotated box. See the picture below for an example of both of these.
IE8 & IE9 platform preview. No transition or transforms at all. I added a -ms- prefix version to the CSS, just to check, and also left a version in with no prefixes to see whether the platform preview version did anything with that instead. It didn’t.
UPDATE: After finding the wonderful http://css3please.com/ I’ve added the following code to the CSS for internet explorer:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)";
zoom: 1;
So now, in IE8, the boxes transform correctly, and change colour as required. However, in the IE9 preview they just disappear completely. To be honest with you, I have no idea what this extra code is doing, and it looks mighty scary.
Opera 10.5 Final. Runs the transition and transforms the box correctly. The colours almost work, though it incorrectly turns the boxes background colour red first. Also, every so often the boxes would have a little fit, and start spinning randomly all over the place, occasionally actually crashing the browser. Strange behaviour really, and although it was repeatable, I couldn’t work out what would trigger it other than hovering over each one randomly. You can see in the picture below – I took a screen shot as the Squeezy box was in mid fit; it’s managed to rotate itself past what you would expect it to do. You can see the Cheezy box has started to rotate correctly clockwise, and will stop at 180 – the Squeezy box is in a position that would of required it to rotate to 270, or -90, neither of which are defined. On a more asthetic point, I think the webkit transition looks and feels a bit smoother as well.
I also had a quick look to see how my Android 1.6 HTC Hero’s browser coped with this. Unexpectedly (to me), it worked really well, but then a bit of research told me that its a webkit based browser, so I guess it working the same way as chrome is probably expected behaviour.