在 3D 骰子/骰子上定位点答案

【问题标题】：Position spots on a 3D dice/die在 3D 骰子/骰子上定位点
【发布时间】：2016-09-10 04:00:37
【问题描述】：

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

这是我的代码 sn-ps。我已经注释掉了包含在顶部、左侧和底部的点，因为我现在正在严格地努力使右侧的点就位。感谢您的帮助！

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container">
    <div id="cube">
      <figure class="front"></figure>
        <div class="spot" id="front-1"></div>
        <div class="spot" id="front-2"></div>
        <div class="spot" id="front-3"></div>
        <div class="spot" id="front-4"></div>
        <div class="spot" id="front-5"></div>
        <div class="spot" id="front-6"></div>
      <figure class="back"></figure>
        <div class="spot" id="back-1"></div>
      <figure class="right"></figure>
        <div class="spot" id="right-1"></div>
        <div class="spot" id="right-2"></div>
        <div class="spot" id="right-3"></div>
        <div class="spot" id="right-4"></div>
        <div class="spot" id="right-5"></div>
      <figure class="left"></figure>
<!--         <div class="spot"></div>
        <div class="spot"></div> -->
      <figure class="top"></figure>
<!--         <div class="spot"></div>
        <div class="spot"></div>
        <div class="spot"></div> -->
      <figure class="bottom"></figure>
 <!--        <div class="spot"></div>
        <div class="spot"></div>
        <div class="spot"></div>
        <div class="spot"></div> -->
    </div>
  </div>
  <div class="roll">
    <p>Roll the Dice</p>
  </div>
 </body>
</html>

【问题讨论】：

标签： jquery html css

【解决方案1】：

只使用六个 div 来创建 tha 面

然后使用 background-image 创建点

看看如何用 3 面来做

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);
}

&lt;div class="three"&gt;&lt;/div&gt;

【讨论】：