CSS3でできる思いっきり飛び出してくるリンクメニュー

思いっきり飛び出してくるリンクメニュー

Menu item 1
Menu item 2
Menu item 3

HTMLサンプル

				<a href="/" class="menu-item">Menu item 1</a>
				<a href="/" class="menu-item">Menu item 2</a>
				<a href="/" class="menu-item">Menu item 3</a> 

CSS3サンプル

		#main-content {
			padding-top: 10px;
		}

		/* Shorthand version */
		.menu-item {
			position: relative;
			display: inline-block;
			border: 1px dashed #000;
			padding: 10px;
			background: #ffffa2;
			height: 20px;
			opacity: 0.3;
			text-decoration: none;

			/* Firefox */
			-moz-transition: all 1s ease;
			/* WebKit */
			-webkit-transition: all 1s ease;
			/* Opera */
			-o-transition: all 1s ease;
			/* Standard */
			transition: all 1s ease;
		}

		.menu-item:hover {
			opacity: 1;

			/* Firefox */
			-moz-transform: scale(2) rotate(30deg) translate(50px);
			/* WebKit */
			-webkit-transform: scale(1.2) rotate(30deg) translate(50px);
			/* Opera */
			-o-transform: scale(2) rotate(30deg) translate(50px);
			/* Standard */
			transform: scale(2) rotate(30deg) translate(50px);

			z-index: 1000;
		}

一言

これだけ存在感があるとグローバルメニューには少し面倒くさい感じになそうです・・・・がワンポイントとしては使えますね。むしろ目を思いっきり引くことができるので、活用していきたいCSS3ですね。