jquery - 円の周りを回転するようにテキストをアニメーション化する

Question

lettering.js (スパン インジェクター) と css 変換を使用して、テキスト行を円の端にマップしました。私の小さな目標は、キーフレームを使用してそのテキストをアニメーション化することです。そして、私の問題は、アニメーション宣言を変換と同じ h1 ルールに入れると、テキストがつぶれてしまうことです。独自のルールを持つ div id に h1 を含めると、まったく別の問題が発生します。

ここに私が持っているものがあります: http://cssdeck.com/labs/oeik8vo69s

    h1 span {
      font: 12px Monaco, MonoSpace;
      height: 150px;
      position: absolute;
      width: 15px;
      left: 350px;
      top: 100px;
      transform-origin: bottom center;
      -moz-transform-origin: bottom center;
      animation: rotation 2s infinite linear;
      -webkit-animation: rotation 2s infinite linear;
      -moz-animation: rotation 2s infinite linear;
    }

    @keyframes rotation {
        from {-webkit-transform: rotate(0deg);}
        to   {-webkit-transform: rotate(359deg);}
    }

    @-webkit-keyframes rotation {
        from {-webkit-transform: rotate(0deg);}
        to   {-webkit-transform: rotate(359deg);}
    }

    @-moz-keyframes rotation {
        from {-webkit-transform: rotate(0deg);}
        to   {-webkit-transform: rotate(359deg);}
    }

    .char1 { 
      transform: rotate(6deg);
      -moz-transform: rotate(6deg);
      -webkit-transform: rotate(6deg);
    }

    .char2 { 
      transform: rotate(12deg);
      -moz-transform: rotate(12deg);
      -webkit-transform: rotate(12deg);
    }

    .char3 { 
      transform: rotate(18deg);
      -moz-transform: rotate(18deg);
      -webkit-transform: rotate(18deg);
    }

    .char4 { 
      transform: rotate(24deg);
      -moz-transform: rotate(24deg);
      -webkit-transform: rotate(24deg);
    }

    .char5 { 
      transform: rotate(30deg);
      -moz-transform: rotate(30deg);
      -webkit-transform: rotate(30deg);
    }

    .char6 { 
      transform: rotate(36deg);
      -moz-transform: rotate(36deg);
      -webkit-transform: rotate(36deg);
    }
    etc...

そして、テキストを次のように回転させたい: http://www.alternativetech.net/images/laughing_man_animated.gif

どうしてこれなの？私の最初の考えは、アニメーションと変換が何らかの形で矛盾していることでした。私はちょっと迷っています。ヘルプ？