要素の角度を変える

CSS3の「transform」プロパティでボックスを回転してみました。

お誕生日おめでとう

リボンの部分にtransform: rotate(-45deg); を指定しpositionで位置を調整
はみ出した部分をoverflow: hiddenで非表示にしています。

マウスを乗せるとY軸回転します。

マウスを乗せると回転します。

初期状態で「rotate( 0deg )」、「:hover」でマウスオンの時「rotate( 360deg )」を指定して、transitionで速度を指定した。