css3とjsでサイコロ

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

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

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

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

This entry was posted in css, css3, html5 and tagged , , , . Bookmark the permalink.

コメントを残す

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

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree