Want to achieve the effect as shown below:

The final result is shown as follows:

The inverted part of the text is not realized, if there is a good way to achieve welcome to my message points ~~~

Note:

  1. HTML structure:
  • As a wholebox
  • Upper and lower layout:box-topFor the top half that contains the 3D effect,box-bottomContains only the second half of the text (easy skips it)
  • box-topInside up and down layout: Note that the text does not have 3D effect, so the 3D effect style cannot be added inbox-top, sobox-topThe upper and lower structures correspond to numbers respectivelynum-boldAnd the background colorfoundation
<div className="box">
  <div className="box-top">
      <span className="num-bold">82</span>
      <div className="foundation"></div>
  </div>
  <div className="box-bottom">The total number of the elevator</div>
</div>
Copy the code
  1. CSS styles

Background Foundation for positioning, gradient background, 3D transformation

The key code

// Gradient backgroundbackground: linear-gradient(0deg.rgba(0.255.252.0.4) 0%.rgba(0.162.255.0) 100%);

// 3D transformationtransform-origin: bottom;
transform: perspective(.15em) rotateX(5deg);
Copy the code

SCSS overall code

.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;
    // The number is vertically and horizontally centered
    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);
      // Positioned relative to the box-top parent element
      position: absolute;
      bottom: 0;
      left: 0;
      // Gradient, 3D effect
      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);
      / / bottom border
      border-bottom: 1px solid #00FFFC;
  }
  
  .num-bold {
      font-family: 'agencry-bold'; }}Copy the code