1.實(shí)現(xiàn)效果

123123.gif

2.實(shí)現(xiàn)原理

perspective定義 3D 元素距視圖的距離，以像素計(jì)。該屬性允許您改變 3D 元素查看 3D 元素的視圖。

當(dāng)為元素定義 perspective 屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。

tips：perspective 屬性只影響 3D 轉(zhuǎn)換元素。

提示：請(qǐng)與 perspective-origin 屬性一同使用該屬性，這樣您就能夠改變 3D 元素的底部位置。

perspective: 1500;
-webkit-perspective: 1500;

backface-visibility 屬性定義當(dāng)元素不面向屏幕時(shí)是否可見(jiàn)。

如果在旋轉(zhuǎn)元素不希望看到其背面時(shí)，該屬性很有用

backface-visibility: hidden;

rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。180deg翻轉(zhuǎn)到背面。

transform: rotateY(-180deg);

3.實(shí)現(xiàn)代碼

<!-- 打卡按鈕 -->
<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(); //使手機(jī)震動(dòng)400ms
  this.setData({
    status: 1, //上班已打卡
    now_time_stop: this.data.now_time,
  })
},

4.更多小程序代碼，關(guān)注蘇蘇的碼云，持續(xù)更新~