3Dトランスフォームによるサイコロ

3Dトランスフォームによるサイコロを実装する方法をご紹介します。

※ CSSコードにはベンダープレフィックスは付けていません。
※ サイコロの目は中央揃えにするためFlexible Layoutを使用しています。

正面
正面：遠近
斜め
斜め：遠近
回転アニメーション：遠近
回転アニメーション

正面

デモ

コード

HTML

CSS

/* サイコロ本体 */
								.dice {
									display:block;
									position:relative;
									margin:0 auto;
									width:100px;
									height:100px;
									transform-style:preserve-3d;
								}

/* 目 */
									.dice .item {
										position:absolute;
										left:0;
										right:0;
										display:flex;
										flex-direction:row;
										align-items:center;
										justify-content:center;
										box-sizing:border-box;
										border:1px solid #333;
										width:100px;
										height:100px;
										background-color:rgba(0, 0, 0, 0.5);
										font-size:3rem;
										text-align:center;
										color:#fff;
									}

/* 目1を上に配置 */
									.dice .item:nth-child(1) {
										transform:translate3d(0, -50px, 0) rotateX(-90deg);
									}

/* 目2を前に配置 */
									.dice .item:nth-child(2) {
										transform:translate3d(0, 0, 50px);
									}

/* 目3を右に配置 */
									.dice .item:nth-child(3) {
										transform:translate3d(50px, 0, 0) rotateY(90deg);
									}

/* 目4を左に配置 */
									.dice .item:nth-child(4) {
										transform:translate3d(-50px, 0, 0) rotateY(-90deg);
									}

※ コードは正面を基準に追加するコードです。

CSS

CSS3逆引きリファレンス一覧へ戻る