JavascriptとCSSで3Dアニメーション HexaFlip

JavaScriptとCSSだけでキューブがグルグル回るアニメーションを提供するプラグインを紹介します。

HexaFlip

HexaFlipスクリーンショット

こんな感じでグリグリ回ります。

フォントサイズや位置、色などはCSSや起動パラメータを変更することで調整することができることを確認しています。

■四角の色の変更

サンプルのdemo.cssの以下の行を変更すると表面の色が変わります。

54行目〜73行目まで

#hexaflip-demo1 .hexaflip-cube > div:nth-child(1n+1),
#hexaflip-demo2 .hexaflip-cube > div:nth-child(1n+1) {
  background-color: #3366FF;
  color: #FFF;
}
#hexaflip-demo1 .hexaflip-cube > div:nth-child(2n+2),
#hexaflip-demo2 .hexaflip-cube > div:nth-child(2n+2) {
  background-color: #006666;
  color: #FFF;
}
#hexaflip-demo1 .hexaflip-cube > div:nth-child(3n+3),
#hexaflip-demo2 .hexaflip-cube > div:nth-child(3n+3) {
  background-color: #000066;
  color: #FFF;
}
#hexaflip-demo1 .hexaflip-cube > div:nth-child(4n+4),
#hexaflip-demo2 .hexaflip-cube > div:nth-child(4n+4) {
  background-color: #eee;
  color: #222;
}

■文字列の変更

index.htmlの以下のスクリプト起動パラメータで変更することができます。

            text1 = 'コンバット越前'.split(''),
            text2 = '焼きビーフン'.split(''),

トップ画面の一番初めに設定してみたりすると、面白いかもしれませんね。参考にしてみてください。

では。