最初は要素を無限に回転させたかった

CSS3 の transform の rotate() を使って止まることなく回転させようと思って作ったものです。
角度が360度以内なら角度を1度ずつ足し続けて、360度になったら角度を0に戻すという処理です。

これを作ったあとに @GeckoTang さんがフォークしてくれました。

そうでした、角度は360度以内じゃなきゃいけないなんてことはなかったんですｗ
他には JS 部分が with(){...} を使って、まとめられています。

せっかくなので手裏剣にしてみた

ここでは、回転させる要素を手裏剣にして、回転させる部分を関数化してみました。
対象要素・回転方向・スピードを指定することができます。
おまけで CSS アニメーションバージョンがついています。

手裏剣の作り方は CSS 部分を読んでもらえると分かるかと思います。

これは上記を更にフォークしてもらったもの。
CSS3 の transition と webkitTransitionEnd イベントを使って無限に回転させるものが追加されています。
また、最後に 3D Transform を使って奥行きのある動きのものも追加されています。

以上を踏まえて作ったもの

出来上がったものはデモページをご覧ください。

CSS3 と JavaScript で八方手裏剣

簡単に説明すると、通常状態、セットされた状態、飛んでいる最中にクラス名を振って、それぞれに CSS で指定をしています。
1回クリックすると、セット状態のクラスを追加。
2回目で投げる(CSS アニメショーン)。
3回目で初期状態に(その前にちょろっとお遊びを入れてますがｗ)。

JavaScript 部分は以下のようになります。
CSS などはデモページで見るかダウンロードしてご確認ください。

var $elm = $('#shuriken');

/* クリックしたときにクラス名を変更していく */
$elm.toggle(
        function() {
            $(this).addClass('set');
        },
        function() {
            $(this).removeClass('set').addClass('throw');
        },
        function() {
            // クラス名 return がある場合にはキャッチしたと表示
            if($(this).hasClass('return')) {
                $(this).hide().removeClass('throw return');
                $('#catched').show().delay(2000).fadeOut(function() {
                    $elm.fadeIn('fast');
                });
            }
            // ない場合は奥に向かって飛んでいる状態なのでそのまま初期に戻す
            else {
                $(this).removeClass('throw');
            }
        })

    // アニメーションが始まったときの処理
    .bind('webkitAnimationStart', function() {
        // 1.5秒したら return というクラス名を付ける
        // 1.5秒は CSS アニメーションから算出 scale(0) になるタイミング
        // throw というクラス名がない場合は初期に戻されているので何もしない
        setTimeout(function() {
            if($elm.hasClass('throw')) {
                $elm.addClass('return');
            }
        }, 1500);
    })

    // アニメーションが終了したときの処理
    // 終了＝キャッチされなかった なので、#killed を表示したあと、初期状態に
    .bind('webkitAnimationEnd', function() {
        $(this).hide().removeClass('throw return');
        $('#killed').show().delay(2000).fadeOut(function() {
            $elm.fadeIn('fast');
        });
    });

本当は jQuery なしで作ろうとしたんですが、だんだん面倒くさくなってきたので……。
JS 部分だけ見るとそんなに難しいことはしてません。
一番大変だったのは CSS アニメーションです。
特に 3D Transform は大変です。