实现骰子

三点骰子

nth-child 对子级元素生效

<div class="box">
  <span class="item"></span>
  <span class="item"></span>
  <span class="item"></span>
</div>

<style>
  /*BFC实现*/
  .box {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    position: relative;
  }
  .item {
    width: 40px;
    height: 40px;
    background-color: #666;
    border-radius: 50%;
    display: block;
  }
  .item:nth-child(2) {
    position: absolute;
    top: 100px;
    left: 100px;
  }

  .item:nth-child(3) {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
</style>

<style type="text/css">
  /*flex实现*/
  .box {
    width: 200px;
    height: 200px;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
  }

  .item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #666;
    justify-content: space-between;
  }

  .box3 .item:nth-child(2) {
    align-self: center;
  }

  .box3 .item:nth-child(3) {
    align-self: flex-end;
  }

  .item:nth-child(2) {
    align-self: center;
  }

  .item:nth-child(3) {
    align-self: flex-end;
  }
</style>

<style>
  /*grid实现*/
  .box {
    width: 200px;
    height: 200px;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    /* grid-template-rows: 33.33% 33.33% 33.33%;; */
    /* grid-template-columns: 33.33% 33.33% 33.33%;; */
    justify-items: center;
  }

  .item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #666;
    align-self: center;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }

  .item:nth-child(2) {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
  }

  .item:nth-child(3) {
    grid-row: 3 / 4;
    grid-column: 3/ 4;
  }
</style>

实现 3D 骰子

<!-- 给出HTML结构 -->
<div class="cube">
  <div class="box box1">
    <span class="item"></span>
  </div>
  <div class="box box2">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="box box3">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="box box4">
    <div>
      <span class="item"></span>
      <span class="item"></span>
    </div>
    <div>
      <span class="item"></span>
      <span class="item"></span>
    </div>
  </div>
  <div class="box box5">
    <div>
      <span class="item"></span>
      <span class="item"></span>
    </div>
    <div>
      <span class="item"></span>
    </div>
    <div>
      <span class="item"></span>
      <span class="item"></span>
    </div>
  </div>
  <div class="box box6">
    <div>
      <span class="item"></span>
      <span class="item"></span>
    </div>
    <div>
      <span class="item"></span>
      <span class="item"></span>
    </div>
    <div>
      <span class="item"></span>
      <span class="item"></span>
    </div>
  </div>
</div>

<style>
  /*以下flex实现，也可以用grid实现*/
  body {
    margin: 0;
    padding: 0;
    background-color: #000;
  }

  .cube {
    width: 200px;
    height: 200px;
    margin: 200px auto;
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateZ(45deg);
    animation: rotate 5s infinite linear;
  }

  .cube:hover {
    animation-play-state: paused;
  }

  @keyframes rotate {
    from {
      transform: rotateX(0) rotateZ(0);
    }

    to {
      transform: rotateX(360deg) rotateZ(360deg);
    }
  }

  .box {
    width: 200px;
    height: 200px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    display: flex;
    opacity: 0.9;
    position: absolute;
  }

  .item {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-radius: 20px;
    border-top-color: green;
    border-bottom-color: red;
    border-left-color: blue;
    border-right-color: pink;
    transform: rotateZ(45deg);
  }

  .box1 {
    justify-content: center;
    align-items: center;
    transform: rotateY(90deg) translateZ(100px);
  }

  .box2 {
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    transform: rotateY(-90deg) translateZ(100px);
  }

  .box3 {
    justify-content: space-between;
    transform: rotateX(90deg) translateZ(100px);
  }

  .box3 .item:nth-child(2) {
    align-self: center;
  }

  .box3 .item:nth-child(3) {
    align-self: flex-end;
  }

  .box4 {
    justify-content: space-evenly;
    flex-direction: column;
    transform: rotateX(-90deg) translateZ(100px);
  }

  .box4 div {
    display: flex;
    justify-content: space-evenly;
  }

  .box5 {
    flex-direction: column;
    justify-content: space-evenly;
    transform: rotateY(180deg) translateZ(100px);
  }

  .box5 div {
    display: flex;
    justify-content: space-evenly;
  }

  .box6 {
    flex-direction: column;
    justify-content: space-evenly;
    transform: rotateY(0deg) translateZ(100px);
  }

  .box6 div {
    display: flex;
    justify-content: space-evenly;
  }
</style>