.wrap {
  transform-style: preserve-3d;
  width: 150px; height: 150px; 
  position: relative; /* 定位起点元素 */
  padding:95px 95px 0px 0px;
  /*border-top:solid 1px gray; x 轴 */
  /*border-left:solid 1px gray; y 轴 */
  /* 倾斜一点方能见立体效果 */
  transform: rotateX(-30deg) rotateY(-30deg); 
}
 
/* z 轴正方向 */
.zaxis_p { 
  position:absolute; 
  width : 150px;
  height:1px; 
  /*border-top:solid 1px gray; */
  /* xy面上，90度立起来就是 z */
  transform: rotateY(-90deg); 
  /* 立起来的旋转点 */
  transform-origin:0 0 0; 
}
 
/* z 轴负方向 */
.zaxis_n { 
  position:absolute; 
  width : 150px;
  height:1px; 
  /* border-top:dashed 1px gray; （虚线）*/
  transform: rotateY(90deg);
  transform-origin:0 0 0; 
}
 
.block { 
  position: absolute; 
  margin: 0 auto; 
  border:solid 2px black;
  border-radius:3px;
  /* 宽高包含边框 */
  box-sizing:border-box; 
  transform-origin:0 0 0;
  /*******************************************/
  display:flex;
  align-items:center;
  justify-content:center;
  /*******************************************/
}
 
.cube { 
  position: absolute;
  /* 子元素版面是需要三维空间的 */
  transform-style: preserve-3d; 
}
 
.magicBox {
  position: absolute;
  transform-style: preserve-3d; 
}