CSS3のtransitionを使って、面白いことをやってみます。
ちょっと説明が難しいのですが、ちょっとしたサブメニューやクリックしてもらいたいボックス要素があるとします。
何気なくオンマウスしたときに、ボックス要素が拡大回転しながら背景色が変わっていくテクニックで、ちょっとしたサプライズ的に使えます。
残念なのはfirefox3.5では動作しませんでしたが、将来的に対応するみたいです。IEは当然ダメダメです。

テクニックといっても超簡単です。
ボックスの要素に-webkit-transition: all 1s ease-in-out;
擬似クラス:hoverに-webkit-transform: rotate(360deg) scale(1.5);とするだけ。
-webkit-transform: rotate(360deg) scale(1.5);の rotate(360deg)で回転する角度(この場合時計回りに360度)。
scale(1.5)で倍率(この場合1.5倍に拡大します)
デモページのCSSは下記の通り。
#submenu {
-webkit-transition: all 1s ease-in-out;
display: block;
width: 360px;
background: #99CCFF;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
border: 1px solid #666666;
margin: 30px;
}
#submenu:hover {
background-color: #fc3;
-webkit-transform: rotate(360deg) scale(1.5);
}
デモページ(safari・chromeで確認してくださいな。
元ネタ:CSS Transformations in Safari/WebKit (and Chrome too?)
