いつだったかもう判然としないくらい前なのですけど（まぁ、そう言っても一ヶ月くらいなものじゃないかと）、記事中の写真とかをちょっと傾けて表示したりとか何とか。RSSリーダー的なものやIEさんでご覧の皆様には全くもって関係ない話なのですけど、そんな感じに表示しています。
　これは、以前どこかのブログか何かで見かけて（失念してしまいました）いいかもと思っていたのを思い出したので、適当にやってみた次第です。まぁ、好みの問題もあろうかと思いますが。

　ランダムに角度を求めて、それをCSS3のtransformのrotateに適用していますので、対応していないブラウザ、まぁ、IEさんなのですけど、では何の変化もありません。実行するだけ無駄です。無駄に働かせてごめんなさい、IEさん。WebKit系のブラウザはバージョンによってエッジがギザギザだったりもします。
　本来ならある程度の主要ブラウザに対応すべきですが、それはこれからの課題と勝手にさせて頂きたく……。

　でまぁ、やりたかったので適当にjQueryのプラグイン形式にしてみました。こんな感じで良いものかいまいちよくわかりませんけど、まぁ、いいんじゃないかなー的で。

;(function($) {
    var extendOpts = function(options) {
        return $.extend({}, jQuery.fn.randomRotateImage.defaults, options);
    };

    var randomRotate = function(dom, opts) {
        var deg = Math.random() * 3 - 1.5;
        var s = 'rotate(' + deg + 'deg)';
        $(dom).css("transform", s).css("-webkit-transform", s).
            css("-moz-transform", s).css(opts);
    };

    $.fn.randomRotate = function(options) {
        var opts = extendOpts(options);
        return this.each(function() {
            randomRotate(this, opts);
        });
    };

    $.fn.randomRotateImage = function(options) {
        var opts = extendOpts(options);
        return this.each(function() {
            $.each($(this).find('img'), function() {
                randomRotate(this, opts);
            });
        });
    };

    $.fn.randomRotateImage.defaults = {
        "padding": "5px",
        "border": "1px solid #cccccc",
        "box-shadow": "2px 2px 10px 0px rgba(0, 0, 0, 0.2)",
        "-webkit-box-shadow": "2px 2px 10px 0px rgba(0, 0, 0, 0.2)",
        "-moz-box-shadow": "2px 2px 10px 0px rgba(0, 0, 0, 0.2)",
        "border-radius": "2px",
        "-moz-border-radius": "2px"
    };
})(jQuery);

　デフォルトで枠やら影やらもCSSを適用していますけど、オプションで渡す事で他にも適用できたり上書きしたりもできます。その場合はベタにハッシュで渡すようにします。
　メソッドは二つ用意していて、一つは直にrotateを適用するもの、もう一つは適用してDOM内からimgを取り出してそれに適用するものです。これだけ傾けたい、何でも傾けたい要求があるかどうかは判然としませんが、ついでなので付けてみました。

　実行例としては、

$('#box').randomRotateImage();
$('#image1').randomRotate({"padding": "15px"});

　こんな感じですか。もちろんどこかにid="box"とid="image1"なヤツがあるんですよ、きっと。

　そして、さらにあれだったのでYUI Compressorで圧縮したファイルも用意してみました。初めて使いましたけど、簡単お手軽ですねぇ、これ。便利便利。

　jquery.randomRotateImage.min.js