css3とjsで サイコロ

最近はずっと自宅でWordPressな仕事をしているので、頭の切り換えの為にcss3でサイコロを描いた。詳しくはDEMOを参照

サイコロっぽくするために立方体の角を丸めたので、それっぽく見えると思う。また、只の絵では面白くないので、ウィンドウをクリックするとjsでランダムに目が変わる様にした。なお、サイコロを転がすとアニメーションがもっさりだったので、あえて転がしてません。

ランダマイズとclassの書き換えは、当初はjQueryを使ったのだけど、ロードの軽さを考えてjavascriptを直に書く形にした。が、jQueryに甘えていたせいで、忘れている事が多すぎ。ちょっと反省。

jsを使わずにランダムに賽の目を出すアイデアも思いついたが、それはまた暇な時にでも。

カテゴリー: css, css3, html5 タグ: , , , パーマリンク

シェア

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA