CSS如何实现3D阴影效果

想实现效果如图：

最终实现效果如图：

文字倒影部分未实现，如有好的实现方法欢迎给我留言提点~~~

需要注意：

1. html结构：

• 整体 box
• 上下布局： box-top为包含3D效果的上半部分，box-bottom为只包含文字的下半部分（easy略过）
• box-top内部上下布局：注意文字不做3D效果，因此3D效果样式不能加在box-top上，因此box-top上下结构分别对应数字展示num-bold和底色背景foundation

<div className="box">
  <div className="box-top">
      <span className="num-bold">82</span>
      <div className="foundation"></div>
  </div>
  <div className="box-bottom">电梯总数</div>
</div>

2. css样式 底色背景foundation进行定位、渐变背景、3D变换

关键代码

// 渐变背景
background: linear-gradient(0deg, rgba(0, 255, 252, 0.4) 0%, rgba(0, 162, 255, 0) 100%);

// 3D变换
transform-origin: bottom;
transform: perspective(.15em) rotateX(5deg);

scss整体代码

.box {
  width: 100px;
  height: 100px;
  text-align: center;

  .box-top {
    position: relative;
    width: 100%;
    height: calc(100% - 20px);
    font-size: 30px;
    font-weight: bold;
    color: #00FFEA;
    // 数字垂直水平居中
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
 .box-bottom {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    font-family: 'Source Han Sans CN';
    font-weight: 400;
    color: #00FFEA;
  }

  .foundation {
      width: 100%;
      height: calc(100% - 1em);
      // 相对box-top父元素定位
      position: absolute;
      bottom: 0;
      left: 0;
      // 渐变、3D效果
      background: linear-gradient(0deg, rgba(0, 255, 252, 0.4) 0%, rgba(0, 162, 255, 0) 100%);
      transform-origin: bottom;
      transform: perspective(.15em) rotateX(5deg);
      // 下边框
      border-bottom: 1px solid #00FFFC;
  }
  
  .num-bold {
      font-family: 'agencry-bold';
  }
}