CSS3掷骰子动画

CSS3掷骰子动画

• 练习一下css3的弹性盒布局，做了一个骰子，随便扔一下吧

  骰子.gif

一、拆分模块，先分别做出骰子的6个面

• HTML

  <div id="container">
      <!-- 1 -->
      <div id="page1">
          <span></span>
      </div>
      <!-- 2 -->
      <div id="page2">
          <span></span>
          <span></span>
      </div>
      <!-- 3 -->
      <div id="page3">
          <span></span>
          <span></span>
          <span></span>
      </div>
      <!-- 4 -->
      <div id="page4">
          <div>
              <span></span>
              <span></span>
          </div>
          <div>
              <span></span>
              <span></span>
          </div>
      </div>
      <!-- 5 -->
      <div id="page5">
          <div>
              <span></span>
              <span></span>
          </div>
          <div>
              <span></span>
          </div>
          <div>
              <span></span>
              <span></span>
          </div>
      </div>
      <!-- 6 -->
      <div id="page6">
          <div>
              <span></span>
              <span></span>
              <span></span>
          </div>
          <div>
              <span></span>
              <span></span>
              <span></span>
          </div>
      </div>
  </div>
  

  点数1是最简单的，只需要设置父元素为弹性盒之后，主轴与侧轴都居中即可。

  #container>div:nth-child(1) {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  2.png

  点数2，在这里我们调整了主轴方向为侧轴并space-around自动分配距离

  display: flex;
  flex-direction: column;
  /* 在侧轴居中 */
  align-items: center;
  /* 左右边上有边距 */
  justify-content: space-around;
  

  3.png

  点数3，中间和最后的点都需要单独设置，这里用到了nth-child() 选择器

  单独设置的点需要用到align-self属性，分别设置为center和flex-end，第一个点没有设置是因为默认就是flex-start。

  #container>div:nth-child(3) {
      display: flex;
      justify-content: space-between;
  }
  
  #container>div:nth-child(3) span:nth-child(2) {
      align-self: center;
  }
  
  #container>div:nth-child(3) span:nth-child(3) {
      align-self: flex-end;
  }
  

  4.png

  从点数4开始，布局就和之前的123不同（见文章开始的html部分）

  每组的div容器先采用了弹性盒，space-between两端对齐，中间自动分配

  在各自的弹性盒中再次设置弹性布局

  #container>div:nth-child(4) {
      display: flex;
      justify-content: space-between;
  
  }
  
  #container>div:nth-child(4) div:nth-child(1),
  #container>div:nth-child(4) div:nth-child(2) {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }
  

  5.png

  点数5，与点数4基本相同，同样是采用嵌套的弹性盒模式，在中间增加了一个居中的点。

  #container>div:nth-child(5) {
      display: flex;
      justify-content: space-between;
  }
  
  #container>div:nth-child(5) div:nth-child(1),
  #container>div:nth-child(5) div:nth-child(3) {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }
  
  #container>div:nth-child(5) div:nth-child(2) {
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  

  6.png

  点数6，通常习惯将它两两一组，分成三组。

  在这里我们将它三个一组，分成两组，侧轴改为主轴，两端对齐即可。

  #container>div:nth-child(6) {
      display: flex;
      justify-content: space-between;
  }
  
  #container>div:nth-child(6) div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }
  

二、将6个面拼接成立方体

之前在上一篇文章中已经介绍过，两种CSS3拼接立方体的方法，这里就不赘述了。

三、最后，设置旋转动画

@keyframes scroll {
    0% {
        transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    }

    25% {
        transform: rotateY(0deg) rotateX(90deg) rotateZ(90deg);
    }

    50% {
        transform: rotateY(0deg) rotateX(180deg) rotateZ(180deg);
    }

    75% {
        transform: rotateY(180deg) rotateX(270deg) rotateZ(270deg);
    }

    100% {
        transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
    }

• 完整的css代码

* {
    margin: 0;
    padding: 0;
}

#container {
    height: 140px;
    width: 140px;
    position: relative;
    margin: 200px auto;
    transform-style: preserve-3d;
    /* display: flex; */
    justify-content: space-around;
    /* 设置旋转的基准点 */
    transform-origin: 50% 50% -70px;
    -webkit-animation: scroll 3s linear 0s infinite;
}

#container>div {
    width: 100px;
    height: 100px;
    background: #eee;
    border-radius: 10px;
    padding: 20px;
    position: absolute;
}

#container span {
    width: 25px;
    height: 25px;
    background: #000;
    border-radius: 50%;
    display: block;
    box-shadow: inset 3px 3px 5px #fff;
}

#container #page1 span {
    width: 35px;
    height: 35px;
    background: #f00;
}

/* 第一个 */
#container>div:nth-child(1) {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2 */
#container>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    /* 在侧轴居中 */
    align-items: center;
    /* 左右边上有边距 */
    justify-content: space-around;
}

/* 3 */
#container>div:nth-child(3) {
    display: flex;
    justify-content: space-between;
}

#container>div:nth-child(3) span:nth-child(2) {
    align-self: center;
}

#container>div:nth-child(3) span:nth-child(3) {
    align-self: flex-end;
}

/* 4 */
#container>div:nth-child(4) {
    display: flex;
    justify-content: space-between;
}

#container>div:nth-child(4) div:nth-child(1),
#container>div:nth-child(4) div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 5 */
#container>div:nth-child(5) {
    display: flex;
    justify-content: space-between;
}

#container>div:nth-child(5) div:nth-child(1),
#container>div:nth-child(5) div:nth-child(3) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#container>div:nth-child(5) div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 6 */
#container>div:nth-child(6) {
    display: flex;
    justify-content: space-between;
}

#container>div:nth-child(6) div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#container #page2 {
    transform-origin: right;
    /*点数为2的面以右边为转轴转动*/
    transform: rotateY(-90deg);
    /*绕Y轴逆时针转动90度*/
    -webkit-transform-origin: right;
    -webkit-transform: rotateY(-90deg);
    -moz-transform-origin: right;
    -moz-transform: rotateY(-90deg);
}

#container #page3 {
    transform-origin: left;
    /*点数为3的面以左边为转轴转动*/
    transform: rotateY(90deg);
    /*绕Y轴顺时针转动90度*/
    -webkit-transform-origin: left;
    -webkit-transform: rotateY(90deg);
    -moz-transform-origin: left;
    -moz-transform: rotateY(90deg);
}

#container #page4 {
    transform-origin: top;
    /*点数为4的面以上边为转轴转动*/
    transform: rotateX(-90deg);
    /*绕X轴逆时针转动90度*/
    -webkit-transform-origin: top;
    -webkit-transform: rotateX(-90deg);
    -moz-transform-origin: top;
    -moz-transform: rotateX(-90deg);
}

#container #page5 {
    transform-origin: bottom;
    /*点数为5的面以下边为转轴转动*/
    transform: rotateX(90deg);
    /*绕X轴顺时针转动90度*/
    -webkit-transform-origin: bottom;
    -webkit-transform: rotateX(90deg);
    -moz-transform-origin: bottom;
    -moz-transform: rotateX(90deg);
}

#container #page6 {
    transform: translateZ(-140px);
    /*点数为6的面沿Z轴向后平移140px*/
    -webkit-transform: translateZ(-140px);
    -moz-transform: translateZ(-140px);
}

@keyframes scroll {
    0% {
        transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    }

    25% {
        transform: rotateY(0deg) rotateX(90deg) rotateZ(90deg);
    }

    50% {
        transform: rotateY(0deg) rotateX(180deg) rotateZ(180deg);
    }

    75% {
        transform: rotateY(180deg) rotateX(270deg) rotateZ(270deg);
    }

    100% {
        transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
    }
}