transformを使って回転するパネルを作ってみる

CSSのtransformを使用してクルっと回転するパネル風ボタンを作ってみます。

1.HTMLを記述

<p><a href="#">Panel1</a></p>

1	<p><a href="#">Panel1</a></p>

2.CSSを記述

p {
	width:150px;
	height:150px;
}
a {
	display:block;
	line-height:150px;
	text-decoration:none;
	text-align:center;
	color:FFF;
	border-radius:10px;
	background-color:#726250;
	transition:0.5s linear;	//回転に要する時間0.5秒　一定の速度で
	-webkit-transition:0.5s linear;
}
p:hover a{
	background-color:#c97586;
	transform:rotateY(180deg) rotateX(180deg) rotateZ(180deg);
	-webkit-transform:rotateY(180deg) rotateX(180deg) rotateZ(180deg);
}

p {

width:150px;

height:150px;

}

a {

display:block;

line-height:150px;

text-decoration:none;

text-align:center;

color:FFF;

border-radius:10px;

background-color:#726250;

transition:0.5s linear; //回転に要する時間0.5秒　一定の速度で

-webkit-transition:0.5s linear;

}

p:hover a{

background-color:#c97586;

transform:rotateY(180deg) rotateX(180deg) rotateZ(180deg);

-webkit-transform:rotateY(180deg) rotateX(180deg) rotateZ(180deg);

}

ボタンにマウスオーバーすると、クルっと回転します。

デモサンプル1

▼ボタンを複数個並べた場合

1.HTMLを記述

<p><a href="#">Panel1</a></p>
<p><a href="#">Panel2</a></p>
<p><a href="#">Panel3</a></p>
<p><a href="#">Panel4</a></p>
<p><a href="#">Panel5</a></p>
<p><a href="#">Panel6</a></p>
<p><a href="#">Panel7</a></p>
<p><a href="#">Panel8</a></p>
<p><a href="#">Panel9</a></p>

<a href="#">Panel1</a>

<a href="#">Panel2</a>

<a href="#">Panel3</a>

<a href="#">Panel4</a>

<a href="#">Panel5</a>

<a href="#">Panel6</a>

<a href="#">Panel7</a>

<a href="#">Panel8</a>

<a href="#">Panel9</a>

デモサンプル2

以上です。簡単ですね。