CSS3だけで手裏剣を作って回してみた

公開日：2015/03/23

21日土曜日よりアニメNARUTOの舞台がスタートしましたね！
世界的にも注目されていて、私も来月行くので楽しみです。

さて今回はNARUTOにちなんで、CSS3を使って手裏剣を描いてみたのでご紹介します。

四角形と三角形の組み合わせ

パーツは4つの四角形と4つの三角形で作ります。
まずHTMLはこんな感じです。
最後に回転をかけてみたいと思い、.spinを追加しています。

<div class="syuriken spin">
	<div class="top"></div>
	<div class="bottom"></div>
	<div class="right"></div>
	<div class="left"></div>
</div>

</div>

まずは四角形を4つ並べよう

.syurikenが4つの四角形を作っている部分です。
これはbox-shadowを使って並べているのがポイント！
「box-shadow:X軸 Y軸ぼかし色」の順で指定することが出来ます。

css3_syuriken_1

.syuriken {
	margin:300px auto;
	position:relative;
	height:100px;
	width:100px;
	background-color:#3C5C1A;
	box-shadow:0px 100px 0 #F5EC01,100px 0px 0 #F5EC01,100px 100px 0 #3C5C1A;
	-webkit-box-shadow:0px 100px 0 #F5EC01,100px 0px 0 #F5EC01,100px 100px 0 #3C5C1A;
	-moz-box-shadow:0px 100px 0 #F5EC01,100px 0px 0 #F5EC01,100px 100px 0 #3C5C1A;
	-ms-box-shadow:0px 100px 0 #F5EC01,100px 0px 0 #F5EC01,100px 100px 0 #3C5C1A;
	-o-box-shadow:0px 100px 0 #F5EC01,100px 0px 0 #F5EC01,100px 100px 0 #3C5C1A;
}

.syuriken {

margin:300px auto;

position:relative;

height:100px;

width:100px;

background-color:#3C5C1A;

box-shadow:0px 100px 0 #F5EC01,100px 0px 0 #F5EC01,100px 100px 0 #3C5C1A;

-webkit-box-shadow:0px 100px 0 #F5EC01,100px 0px 0 #F5EC01,100px 100px 0 #3C5C1A;

-moz-box-shadow:0px 100px 0 #F5EC01,100px 0px 0 #F5EC01,100px 100px 0 #3C5C1A;

-ms-box-shadow:0px 100px 0 #F5EC01,100px 0px 0 #F5EC01,100px 100px 0 #3C5C1A;

-o-box-shadow:0px 100px 0 #F5EC01,100px 0px 0 #F5EC01,100px 100px 0 #3C5C1A;

}

四角形の周りに三角形を付け足す

先ほど作った四角形の周りに4つの三角形を付けています。
borderで三角形を作成し、position:absoluteで位置を指定しています。
ちなみに簡単に三角形を作成できるサイトがこちら↓
CSS三角形作成ツール「http://apps.eky.hk/css-triangle-generator/ja」

css3_syuriken_2

.top{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 100px 100px;
	border-color: transparent transparent #F5EC01 transparent;
	position:absolute;
	top:-100px;
	left:100px;
}
.bottom{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width:100px 100px 0 0;
	border-color:#F5EC01 transparent transparent transparent;
	position:absolute;
	top:200px;
}
.right{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width:100px 0 0 100px;
	border-color:transparent transparent transparent #3C5C1A;
	position:absolute;
	top:100px;
	left:200px;
}
.left{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 100px 100px 0;
	border-color:transparent #3C5C1A transparent transparent;
	position:absolute;
	left:-100px;
}

.top{

content:"";

width: 0;

height: 0;

border-style: solid;

border-width: 0 0 100px 100px;

border-color: transparent transparent #F5EC01 transparent;

position:absolute;

top:-100px;

left:100px;

}

.bottom{

content:"";

width: 0;

height: 0;

border-style: solid;

border-width:100px 100px 0 0;

border-color:#F5EC01 transparent transparent transparent;

position:absolute;

top:200px;

}

.right{

content:"";

width: 0;

height: 0;

border-style: solid;

border-width:100px 0 0 100px;

border-color:transparent transparent transparent #3C5C1A;

position:absolute;

top:100px;

left:200px;

}

.left{

content:"";

width: 0;

height: 0;

border-style: solid;

border-width: 0 100px 100px 0;

border-color:transparent #3C5C1A transparent transparent;

position:absolute;

left:-100px;

}

最後に手裏剣らしく回転させてみましよう！

.spinに回転するアニメーションをつけています。
transform-originは回転する中心をしていするもので変更すると中心が変わります。

サンプルはこちら

.spin{
	transform-origin:100% 100%;
	-webkit-animation: spin 2.5s linear infinite;
	-moz-animation: spin 2.5s linear infinite;
	-ms-animation: spin 2.5s linear infinite;
	-o-animation: spin 2.5s linear infinite;
	animation: spin 2.5s linear infinite;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}