ＣＳＳ３の-transitionでボックスを拡大回転させてみる。ただし、safari・chrome専用

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?)

Share/Bookmark

One Response so far.

1. pell grant より:

   2011年1月13日 9:35 PM

   Thank you, I have recently been searching for information about this topic for ages and yours is the best I have discovered so far.

   返信