SOURCE

  <div class="cubeWrapper">
<div class="cube">
      <div class="face front">
          <div class="text-wrapper width-text">宽100</div>
          <div class="text-wrapper height-text">高100</div>
          <div class="text-wrapper depth-text">深200</div>
      </div>
      <div class="face back"></div>
      <div class="face right">
          <div class="line top-line"></div>
          
      </div>
      <div class="face left"></div>
      <div class="face top">
          <div class="line right-line"></div>
      </div>
      <div class="face bottom"></div>
  </div>
  </div>

.cubeWrapper {
    --binDepth: 200px;
    --binWidth: 100px;
    --binheight: 100px;
    --faceBg: #2695f3db;
    --binBorder: 1px black solid;
    --splitLineColor: black;
    perspective: 800px;
    /* 视角倾斜调这个perspective-origin */
    /* perspective-origin: 150% 150%;  */
    perspective-origin: 120% -60%; 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    text-align: center;
}
.cube {
    /* 长100 高100 */
    width: var(--binWidth);
    height: var(--binheight);
    /* 观察者与 z=0 平面的距离 */
    perspective: 1000px; 
    /* perspective: none;  */
    transform-style: preserve-3d;
    position: relative;
}
.face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: inherit;
    font-size: 60px;
    color: #fff;
    background: var(--faceBg);

}
.front {
    /* transform: translateZ(50px); */
    transform: translateZ(100px);
    border: var(--binBorder);
}
.back {
    transform: rotateY(180deg) translateZ(100px);
    border: var(--binBorder);
}
.right {
    transform: rotateY(90deg) translateZ(0px);
    width: var(--binDepth);
}
.left {
    transform: rotateY(-90deg) translateZ(100px);
    width: var(--binDepth);
}
.top {
    transform: rotateX(90deg) translateZ(100px);
    /* height: 200px; */
    height: var(--binDepth);
    border-left: var(--binBorder);
    border-right: var(--binBorder);
}
.bottom {
    transform: rotateX(-90deg) translateZ(0px);
    height: var(--binDepth);
    border-left: var(--binBorder);
    border-right: var(--binBorder);
}
.line::before {
    content: "";
    position: absolute;
    background: var(--splitLineColor);
}
.top-line::before {
      top: 0;
      right: 50%;
      width: 2px;
      height: 100%;
}
.right-line::before {
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
}
.text-wrapper{
    font-size: 12px;
    position: absolute;
    
}
.width-text {
    bottom: 0;
}
.height-text {
    right: 0;
}
.depth-text {
   bottom: 60%;
   right: -45%;
   transform: rotateZ(-50deg)
}