CSS | 3Dなサイコロの作り方
CSSでtransform-styleのpreserve-3dを使って、3Dなサイコロを作成する方法を紹介しています。
See the Pen CSS | 3D Dice by yochans (@yochans) on CodePen.
主にダイスの目の設定などについて書いています。
角丸にしたり、隙間をあけたりと多少サイコロっぽく（努力は）していますが、サイコロデザインの元としている立方体の作成方法と殆ど同じです。
立方体の作り方は別記事で紹介しています。
https://1-notes.com/css-3d-cube-design/3Dサイコロの作り方
この記事はCSSの「transform-style」に「preserve-3d」を指定した立体的なサイコロの作成手順となります。
- 本体（コンテナ）
- 側面×6
- サイコロの出目
本体と側面については省略しますが、CSS | 3Dな立方体の作り方 | ONE NOTESにて書いていますので、宜しければ見てあげて下さい。
HTML構造
できるだけ手軽にダイスの出目の表示を実装できないか悩んだ末、以下のようなHTML構造になりました。
<div class="dice">
<div><span>●</span></div>
<div><span>●<br><br>●</span></div>
<div><span>●<br>●<br>●</span></div>
<div><span>●●<br><br>●●</span></div>
<div><span>●●<br>●<br>●●</span></div>
<div><span>●●<br>●●<br>●●</span></div>
</div>サイコロの出目
改行の入れ方と「text-align: center」でザックリとサイコロっぽい円の並びができました。
円と円の間隔を「line-height（行間）」と「letter-spacing（字間）」で、位置調整をmarginで、それぞれ調節しています。
「color: transparent」より下に記述している「background」「background-clip」「text-shadow」は立体感を出すために使っていますが、完全にその時の好みでした。
普通に色を付けたり透過したり、フィルターをかけたり、そもそもダイスを半透明じゃなくしたり、他に良さそうなデザインがありそうです。
.dice div span{
display: block;
margin-left: 18px;
font-size: 34px;
line-height: 28px;
letter-spacing: 18px;
text-align: center;
color: transparent;
background: rgba( 0, 0, 0, 0.4);
text-shadow: 1px 1px 1px rgba( 255, 255, 255, 0.7);
background-clip: text;
-webkit-background-clip: text;
}ダイスの目の2と3は、やはり斜めにしたいところですので別途指定しました。
translate()は位置調整です。
.dice div:nth-child(2) span, .cube div:nth-child(3) span{
transform: translate(-5px,8px) rotate(45deg);
}サイコロのデザイン集的なページを作成するかもしれません。
動作サンプルのCSSコード
こちらは動作サンプルで紹介しているHTMLとCSSのそのままのコードになります。
<div class="dice">
<div><span>●</span></div>
<div><span>●<br><br>●</span></div>
<div><span>●<br>●<br>●</span></div>
<div><span>●●<br><br>●●</span></div>
<div><span>●●<br>●<br>●●</span></div>
<div><span>●●<br>●●<br>●●</span></div>
</div>.dice {
margin: 40px;
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
animation: rotate-anim 6s linear infinite;
}
@keyframes rotate-anim {
0% {transform: rotateX(0) rotateY(0); }
100% {transform: rotateX(-360deg) rotateY(720deg); }
}
.dice div {
width: 95%;
height: 95%;
position: absolute;
border-radius: 15%;
display: flex;
justify-content: center;
align-items: center;
}
/* ● */
.dice div:nth-child(1) {
background: rgba(255, 127, 127, .8);
transform: translateZ(50px);
}
/* ●● */
.dice div:nth-child(2) {
background: rgba(255, 127, 255, .8);
transform: rotateX(-90deg) translateZ(50px);
}
/* ●●● */
.dice div:nth-child(3) {
background: rgba(127, 127, 255, .8);
transform: rotateY(90deg) translateZ(50px);
}
/* ●●●● */
.dice div:nth-child(4) {
background: rgba(127, 255, 255, .8);
transform: rotateY(-90deg) translateZ(50px);
}
/* ●●●●● */
.dice div:nth-child(5) {
background: rgba(191, 255, 127, .8);
transform: rotateX(90deg) translateZ(50px);
}
/* ●●●●●● */
.dice div:nth-child(6) {
background: rgba(255, 191, 127, .8);
transform: rotateY(180deg) translateZ(50px);
}
/* ダイスの目 */
.dice div span{
display: block;
margin-left: 18px;
font-size: 34px;
line-height: 28px;
letter-spacing: 18px;
text-align: center;
color: transparent;
background: rgba( 0, 0, 0, 0.4);
text-shadow: 1px 1px 1px rgba( 255, 255, 255, 0.7);
background-clip: text;
-webkit-background-clip: text;
}
/* ●● and ●●● */
.dice div:nth-child(2) span, .cube div:nth-child(3) span{
transform: translate(-5px,8px) rotate(45deg);
}