フロントエンド開発Blog

オレには鈍器がある

CSS3 , UI , jQuery , アニメーション

どこかのおしゃれサイトとかにありそうな、CSSで作った立方体にアイコンとリンクを貼り付けたUIです。
SVG-SpriteはGulpでタスクを作って対応しています。

特にこれといって難しいことはしていませんが、こういうのをぱっと作ろうとすると意外と時間がかかってしまうものです。CSS3で立法体を作る方法についてはぐぐるとたくさんでてきますが、大抵はtransform rotateオンリーでさっくり作れてしまうかと思います。


#cube .top  {
	transform: rotateX(90deg) translateZ(100px);
}
#cube .front {
	transform: translateZ(100px);
}
#cube .right {
	transform: rotateY(90deg) translateZ(100px);
}
#cube .back {
	transform: rotateY(180deg) translateZ(100px);
}
#cube .left {
	transform: rotateY(-90deg) translateZ(100px);
}
#cube .bottom {
	transform: rotateX(-90deg) translateZ(100px);
}

transform-originとかも不要でシンプルですね。SVG-SPRITEはGulpを使うとすんなり作れちゃいます。srcディレクトリにSVGファイルをががっと入れて、gulpかけるとdestに結合されたSVGが作られるという手間要らず。

今回はJSはあまり使っていません。アニメーションEndをコントロールしてclassを当てて次のアニメーションを実行する、という用途がメインです。animationend万歳!

ソースコード一式はgithubにアップしましたので興味あるかたはご覧くださいませ。

ページトップへ

関連ページ

ページトップへ