1.实现效果

123123.gif

2.实现原理

perspective定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

tips：perspective 属性只影响 3D 转换元素。

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

perspective: 1500;
-webkit-perspective: 1500;

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用

backface-visibility: hidden;

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。180deg翻转到背面。

transform: rotateY(-180deg);

3.实现代码

<!-- 打卡按钮 -->
<view class="c_clock flex-column">
 <view class="clock_time flex-column j_c {{status==1?'c1':''}}" catchtap="clockInStart">
   <text>上班打卡</text>
   <text>{{now_time}}</text>
 </view>
 <view class="clock_time_over flex-column j_c  {{status==1?'c2':''}}" catchtap="clockInStart">
   <text>已打卡</text>
   <text>{{now_time_stop}}</text>
 </view>
</view>

.c_clock {
  margin: 300rpx auto 0;
  width: 350rpx;
  height: 380rpx;
  perspective: 1500;
  -webkit-perspective: 1500;
  -moz-perspective: 1500;
}

.clock_time {
  width: 350rpx;
  height: 350rpx;
  margin-bottom: 30rpx;
  position: absolute;
  transition: all 1s;
  backface-visibility: hidden;
}

.clock_time::after {
  content: '';
  top: 0;
  left: 0;
  width: 350rpx;
  height: 350rpx;
  border-radius: 50%;
  position: absolute;
  z-index: 9;
  background: rgba(48, 124, 237, 0.08);
  animation: scale 1s infinite alternate-reverse;
}

/* 已打卡 */
.clock_time_over {
  width: 350rpx;
  height: 350rpx;
  margin-bottom: 30rpx;
  border-radius: 50%;
  background: rgba(48, 124, 237, 0.08);
  position: absolute;
  transition: all 1s;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
}

.clock_time_over::after {
  position: absolute;
  z-index: 11;
  content: '';
  width: 320rpx;
  height: 320rpx;
  background: #C6CED9;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



.clock_time_over text {
  position: relative;
  z-index: 13;
  color: #FFFFFF;
}

.clock_time_over text:first-child {
  font-size: 36rpx;
  margin-bottom: 14rpx;
}

.clock_time_over text:last-child {
  font-size: 28rpx;
}
@keyframes scale {

  0% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.clock_time::before {
  position: absolute;
  z-index: 11;
  content: '';
  width: 320rpx;
  height: 320rpx;
  background: rgb(48, 124, 237, 0.79);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.clock_time text {
  position: relative;
  z-index: 13;
  color: #FFFFFF;
}

.clock_time text:first-child {
  font-size: 36rpx;
  margin-bottom: 14rpx;
}

.clock_time text:last-child {
  font-size: 28rpx;
}

.clock_address {
  font-size: 28rpx;
  color: #333333;
  width: 450rpx;
  margin: 0 auto;
}

.clock_address text {
  vertical-align: middle;
}

clockInStart() {
 if (!this.data.imgUrl) {
    return wx.showToast({
      title: '尚未上传打卡照',
      icon: 'error'
    })
  }
  wx.vibrateLong(); //使手机震动400ms
  this.setData({
    status: 1, //上班已打卡
    now_time_stop: this.data.now_time,
  })
},

4.更多小程序代码，关注苏苏的码云，持续更新~