CSS3の-transitionでボックスを拡大回転させてみる。ただし、safari・chrome専用 | KRUZ-GRAPHIX
View Comments

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

Posted 3月 2nd, 2010 in CSS and tagged by KRUZ
Google Buzz

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

cssで拡大回転させる

テクニックといっても超簡単です。
ボックスの要素に-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?)

関連記事

Comments are closed.

blog comments powered by Disqus