GreyDuck‘s been curious about the random rotated image trick I’m using on the side here. I think the actual implementation is going to be a bit of a letdown for how fun (in my opinion) the results are.

First you choose a bunch of pictures, and determine every possible way you could order any three of those pictures. Then you fire up Photoshop and create every possible permutation, saving them as (approximately) 1MB .png images (be sure to use transparency), and then you use a little rotation script to choose one set randomly.

Voila!

…

Did I mention I have sixty-some images in use right now?

Rotating (as in “tilting”) images

Both Webkit (the rendering engine behind Safari and Chrome) and Gecko (the same, but for Firefox) support the CSS3 “rotate” transformation, so rotating images in those browsers is a one-line bit of CSS:

-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);

Internet Explorer doesn’t support this (surprise), but does have a pseudo-CSS effect—the matrix filter—that does something similar (surprise!):

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470, sizingMethod='auto expand');

Use this matrix calculator to figure out the four values to use for the rotation you want. The “auto expand” sizingMethod tells IE to resize the bounding rectangle for the rotated image so that it isn’t truncated by the image’s original dimensions.

For kicks you can put a bit of a shadow on the images using another bit of CSS3… in Firefox and Safari, at least.

-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,.4);
-moz-box-shadow: 3px 3px 6px rgba(0,0,0,.4);

Rotating (as in randomly selecting) images

The actual selection of the images is done by a small bit of PHP code:

<?php

$source_folder = 'rotating_pics/';

$pic_list = array(
'picA.jpg',
'picB.jpg',
'picC.jpg',
'picD.jpg',
'picE.jpg'
);

$lucky_pics = array_rand($pic_list, 3);

$top_pic = $source_folder . $pic_list[$lucky_pics[0]];
$mid_pic = $source_folder . $pic_list[$lucky_pics[1]];
$end_pic = $source_folder . $pic_list[$lucky_pics[2]];

?>

This just creates an array of picture names, uses a function to create another array containing three random elements from that first array, and uses those elements to store the image paths in three variables.

Those three variables are then inserted into the HTML (prior to being sent to the browser, natch) via basic PHP echo commands:

<div id="background_pic_1" class="side_pics" style="background-image:url(<?php echo $top_pic; ?>)">&nbsp;</div>

Everything else is just HTML and CSS formatting, and there’s nothing stopping you from digging through what I’ve done.

…

Again, nothing too hard—and the end result is kinda fun.

11/24/09 Update: I see I glossed over the single largest point of tedium: getting the file names in my array. On the Mac (I don’t know about Windows, but I suspect this won’t work as smoothly), you can select a bunch of files and copy them—and when you paste them into a text document, you end up pasting only their file names (separated by carriage returns). Using a program with column editing abilities (I like TextMate on the Mac, and Notepad++ on Windows), it’s a couple keystrokes to get them indented and the opening quote inserted.

I don’t have a slick way of getting the closing quote and comma at the end of each line, beyond copying that and then pasting down the line… but it doesn’t take more than a minute, and I figure it saves having my server run some comparatively big ‘ol “scan this folder for all pictures and then choose three” PHP script every time someone loads my page. (Admittedly, though, this site isn’t high-enough traffic for that to cause a problem.)

If I were really irritated, it wouldn’t take long to write a little Ruby or Python script to take the contents of a folder and generate the PHP rotation script automatically.

The real point of tedium, in my eyes, is trying to pick out pictures and crop them (flip them, etc.) so that they’re ready to be used. I haven’t come up with any fancy way of dealing with all that: it’s just the internet, me, and Photoshop.