CSSとJavaScriptで作る！Web上で簡単に「サイコロを振るUI」を実装する方法

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトにちょっとした“遊び心”を加えたい。
そんなときに便利なのが、クリックするだけでコロッと転がる「サイコロUI」です。

一見すると動きのあるミニゲームのように見えますが、その仕組みはとてもシンプル。
HTML・CSS・JavaScriptの基礎だけで実装でき、しかも3Dアニメーションの理解が一気に深まる優秀な題材でもあります。

この記事では、
そのままコピペすれば動く「サイコロを振るUI」を丁寧に紹介し、
さらに応用として“リアルな転がり感” を加える方法まで解説します。

完成デモ（CodePenコピペOK）

以下のコードを CodePen に HTML / CSS / JS それぞれに貼れば、すぐに動作します。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

サイコロUIの仕組みをざっくり解説

このサイコロは「立方体の6面をCSSだけで組み立てたもの」。
ポイントとなるテクニックは以下の通りです。

transform-style: preserve-3d

子要素の3D配置を維持し、立体的に見えるようにします。

translateZ(60px) で奥行きに押し出す

各面を中心から外側へ出すことで立体を表現。

回転で“出目”を前に向ける

JavaScript側でランダムに回転角を変えることで「1〜6」の目が出ます。

この3つだけで、驚くほど自然にサイコロが完成します。

発展版：クリックしたら「コロコロ転がる感」を演出する

「いきなり止まる」のではなく、
本物のサイコロのように一瞬だけ高速回転してから止まる
そんな動きを表現できます。

ここでは “アニメーション感だけ” をプラスする簡単なコードを紹介します。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

まとめ

Webで作る「サイコロ」は、見た目こそ遊び心満載ですが、裏側には 3D CSS・アニメーション・JavaScriptの基礎がしっかり詰まっています。

シンプルで作りやすいのに、応用の幅がとても広いUIです。