预览效果：动画8.gif 使用：从 js 一步步到 Vue2加vant 的倒计时的组件使用

🐯关于时间页的翻转-我有话要说

时间流动，卡片翻转的效果，可以用在很多需要计时、计数的场景中，使用到的css关键属性如下：

css属性	效果
`transform:rotate(xxxdeg)`	用来对节点进行旋转操作
`transform:perspective(xxxpx)`	使近处与远处看到的元素效果不同，就又了一种翻转时top边变宽的视觉效果
`transform-style：preserve-3d`	用来使所有的子元素在3D可见中呈现
`backface-visibility:hidden`	有个节点内容有正反面，为了防止不露出反面内容

需要实现的思路解析

动画4.gif

🐯先对基本的正反面进行处理

基本的沿着X轴翻转问题

简单的两面旋转效果，而且是不透的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用hvoer先体验</title>
  <style>
    .box{
      position: relative;
      margin: 0 auto;
      width: 150px;
      height: 200px;
      transform-style: preserve-3d;
      transition: all 1s;
    }
    .t-block{
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility:hidden;
    }
    .front{
      background-color: rgb(98, 228, 23);
    }
    .back{
      background-color: aquamarine;
      transform: rotateY(180deg) rotateZ(180deg);
    }
    .text{
      font-size: 100px;
      color: #FFFFFF;
      text-align: center;
      line-height: 200px;
    }
    .box:hover{
      transform:perspective(200px)  rotateX(-180deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="front t-block text">1</div>
    <div class="back t-block text">2</div>
  </div>
</body>
</html>

预览出现的效果

动画1.gif

一半的翻转问题

再来处理处理一下，只需要一半的翻转问题

主要使用了 transform-origin: bottom; /* 以底部为旋转的基准点 */与 line-height

css的修改处，我使用 + 与 - 来说明代码片段的增减

+ html,body{
+     background-color: black;
+  }
  .front{
      background-color: rgb(98, 228, 23);
+     line-height: 200px;
   }
   .back{
      background-color: aquamarine;
      transform: rotateY(180deg) rotateZ(180deg);
+     line-height: 0px;
   }
   .text{
      font-size: 100px;
      color: #FFFFFF;
      text-align: center;
-     line-height: 200px;
   }

预览效果动画2.gif

隐藏一下多余的部分

记得要隐藏一下多余的部分本次的css的修改处，

    .t-block{
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility:hidden;
+     overflow: hidden;
    }

预览效果动画3.gif

处理结束

正反面就处理结束了--- 我先奉上它的代码片段

🐯开始对整体的一个处理

整体的处理上主要是进行了拼接，将3块拼接成一个整体。

效果图片如下动画4.gif 对于上述的讲解来说，下面的就是一个拼接，没有什么主要内容了，在这里直接给予代码块

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>时间计时器</title>
  <style>
    .time{
      position: relative;
      height: 100px;
      box-sizing: border-box;
    }
    .text{
      font-size: 100px;
      color: #FFFFFF;
      text-align: center;
      line-height: 200px;
    }
    .time .top{
      position: relative;
    }
    .time .bottom{
      line-height: 0; /* 把数字头顶到上面去 */
    }
    .block{
      width: 150px;
      height: 100px; 
      background-color: black;
      overflow: hidden;
    }
    .time .flod-box{
      position: absolute;
      top: 0;  /* 为了把flod-box 放到top表面上 */
      width: 150px;
      height: 100px;
      transform-style: preserve-3d;
      transform-origin: bottom; /* 以底部为旋转的基准点 */
      transition: all 1s;
    }
    .flod-box .flod-block{
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility:hidden;
      overflow: hidden;
    }
    .flod-box .front{
      background-color: rgb(98, 228, 23);
    }
    .flod-box .back{
      background-color: aquamarine;
      transform: rotateX(0deg) rotateY(-180deg) scale(-1);
      line-height: 0px;   /* 把数字上移了*/
    }
    .flod-box:hover{
      transform:perspective(200px) rotateX(-180deg);
    }
  </style>
</head>
<body>
  <div class="time text">
    <div class="top block">2</div>
    <div class="flod-box ">
      <div class="front flod-block">1</div>
      <div class="back flod-block">2</div>
    </div>
    <div class="bottom block">1</div>
  </div>
</body>
</html>

🐯开始进行js处理

目前直先读取对秒的使用、同时也给与一定的间隔分开

这样一个简单的计时器就写好了，下面准备加强一下写法-写出活动倒计时

🐯倒计时

我打算引入vue框架、vantUI的倒计时去写接下来就开整了动画7.gif

代码判断如下

🐯出现的问题

在代码样式居中的时候会出现不必要的抖动平移，这点我没有找到好的办法解决，欢迎讨论！情况复现：

在css属性中添加

.time{
  position: relative;
  width: 150px;
  height: 100px;
  box-sizing: border-box;
+ margin: 0 auto;
}

在浏览器中打开F12 情况如下：

🐯结语

祝你我好运🐮🐯

翻转卡牌式 - 倒计时(计时器)