在3D骰子/骰子上定位斑点

Question

我正在尝试使用CSS3构建3D模具。我已经建立了我的立方体，能够围绕它的Y轴和X轴旋转它，并且能够在正面和背面添加斑点，但我正在努力将模具的位置放在左侧，右侧，顶部，和准确的底部。我使用转换属性有点新，所以我确信这并不像我做的那么困难。

以下是我的代码段。我已经评论了顶部，左侧和底部所包含的斑点，因为我正在努力使右边的斑点位于此刻。谢谢你的帮助！

([tT])\1\w+

$(document).ready(function(){
  $('body').on('click', '.roll', function(){
    console.log("should be flipping")
    $('#cube').toggleClass("rolling")
  })
})

.container{
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 1000px;
  margin: 0 auto;

}
#cube{
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  top: 30px;

}
#cube figure{
  margin: 0;
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
  border: 2px solid black;
  transform-style: preserve-3d;
}
figure{
  background-color: black;
  border-radius: 6px;
}
.spot{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  position: absolute;

  transform-style: preserve-3d;
}
#front-1{
  transform: translateZ(100px);
  margin-left: 10px;
  margin-top: 10px;
}
#front-2{
  transform: translateZ(100px);
  margin-left: 10px;
  top: 50%;
  margin-top: -25px;
}
#front-3{
  transform: translateZ(100px);
  bottom: 0;
  margin-bottom: 10px;
  margin-left: 10px;
}
#front-4{
  transform: translateZ(100px);
  margin-left: 140px;
  margin-top: 10px;
}
#front-5{
  transform: translateZ(100px);
  margin-left: 140px;
  top: 50%;
  margin-top: -25px;
}
#front-6{
  transform: translateZ(100px);
  margin-left: 140px;
  bottom: 0;
  margin-bottom: 10px;
}
#back-1{
  transform: rotateX(180deg) translateZ(100px);
  top: 50%;
  margin-top: -25px;
  right: 50%;
  margin-right: -25px;
}
.roll{
  width: 100px;
  margin: 0 auto;
  margin-top: 250px;
  border: 2px solid black;
  background-color: #0000CD;
  color: white;
  border-radius: 4px;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.roll p{
  padding: 0px 0px;
  text-align: center;
  line-height: 1em;
}
.front {
  transform: rotateY(  0deg) translateZ(100px)
}
#cube .back {
  transform: rotateX(180deg) translateZ(100px)
}
#cube .right{
  transform: rotateY( 90deg) translateZ(100px)
}
#cube .left  {
  transform: rotateY(-90deg) translateZ(100px)
}
#cube .top   {
  transform: rotateX( 90deg) translateZ(100px)
}
#cube .bottom{
  transform: rotateX(-90deg) translateZ(100px)
}
.rolling{
  transform:    rotateY( 90deg )
}
#cube {
  transition: transform 2s;
}

Answer 1

仅使用六个div来创建面孔

然后使用背景图像创建点

了解如何使用3面

进行操作

＆＃13;

＆＃13;

div {
    width: 300px;
  height: 300px;
  background-color: black;
}

.three {
    background-image: radial-gradient(circle at 64px 64px, white 40px, transparent 40px),
      radial-gradient(circle at 150px 150px, white 40px, transparent 40px),
      radial-gradient(circle at 236px 236px, white 40px, transparent 40px);
}

＆＃13;

<div class="three"></div>

＆＃13;

＆＃13;

＆＃13;