SitePoint: New Articles, Fresh Thinking for Web Developers and Designers

Kevin Yank氏がWhat Makes a Good 404 Page? - SitePointにおいて、404 page not foundのページの例としてhttp://idzr.org/404を紹介している。http://idzr.org/404は現在策定が進められているCSS 3D Transforms Module Level 3の機能を使って背後に文字のアニメーションを表示するというもの。Webkitで実装されているためSafariやChromeで閲覧できるほか、iPhoneのSafariからも動作を確認できる。

Safari 4 on Mac OS Xでの閲覧例

Chrome on Windows XPでの閲覧例

iPhone 3GS Safariでの閲覧例

背後の文字がアニメーションしていることを確認できる

http://idzr.org/404のアニメーションは基本的にCSSのみで実現されている。JavaScriptも使われているが、これは最初に文字をランダムに配置するためだけに利用されている。

3DアニメーションはCSSのみで実現されている

文字をランダムに配置するだけの目的でJavaScritが利用されている

IE8では機能しない

Firefox 3.7 Alpha 2では機能しない

なお、What Makes a Good 404 Page?では、404 page not foundのページとして機能的なものがいいか、http://idzr.org/404のようにユーザに驚きを与えるようなものの方がいいか、という点に関しては答えがわからないとも説明している。