Css 从等轴测栅格上的平铺中剪切的图像

我的等轴测表设置如下：

<table style="transform: rotateX(60deg) rotateZ(45deg); border-spacing: 0px">
  <tr style="transform: translateY(0em)"> <!-- For first row, future rows get translated down -->
    <td style="transform: translateX(0em)"> <!-- For first column, future columns get translated down -->
      <div class="tile">
        <div class="background"></div>
      </div>
    </td>
  </tr>
</table>

它产生了一个站在瓷砖上的小机器人：

然而，机器人偏离了中心。因此，为了使其居中，我添加了以下CSS：

.tile {
  transform: translate3d(0em, 0em, 0em);
  width: 4em;
  height: 4em;
}

.background {
  height: calc(28.75em);
  width: calc(28.75em);
  background-size: 100%;
  background-image: url("/tiles/robot2/facing_north.png"), url("/tiles/plain_4/facing_east.png");
}

.background {
  background-position-y: -3em, 0em;
}

这会将机器人向上移动，但不会将瓷砖向上移动，这很完美！除此之外，我似乎被机器人的头砍掉了：

我怎样才能将机器人向上移动，使它看起来在瓷砖上居中，而不必剪掉它的头顶？我尝试过溢出：可见无效

例如：

.container{
位置：相对位置；
z指数：10；
}
.iso{
变换：rotateX（60度）rotateZ（45度）；
位置：绝对位置；
边界间距：0px；
左：200.0px；
顶部：100.0px；
}
.瓷砖{
变换：translate3d（0em，0em，0em）；
宽度：4em；
高度：4em；
}
.背景{
变换：rotateZ（-45度）rotateY（-60度）translate3d（-1.1米，-4.8米，0米）；
高度：calc（23em）；
宽度：钙（23em）；
背景大小：100%；
背景图像：url（“https://femto.pw/us7j.png“”，url（“”）https://femto.pw/r44h.png");
背景位置y：-2.5em，0em；
背景重复：无重复；
}

.container{
位置：相对位置；
z指数：10；
}
.iso{
变换：rotateX（60度）rotateZ（45度）；
位置：绝对位置；
边界间距：0px；
左：200.0px；
顶部：100.0px；
}
.瓷砖{
变换：translate3d（0em，0em，0em）；
宽度：4em；
高度：4em；
}
.背景{
变换：rotateZ（-45度）rotateY（-60度）translate3d（-1.1米，-4.8米，0米）；
高度：calc（23em）；
宽度：钙（23em）；
背景大小：100%；
背景图像：url（“https://femto.pw/r44h.png");
背景位置y：-2.5em，0em；
背景重复：无重复；
位置：相对位置；
}
.背景：：以前{
内容：''；
位置：绝对位置；
顶部：-80px；
底部：0；
左：0；
右：0；
背景图像：url（“https://femto.pw/us7j.png");
背景尺寸：包含；
背景重复：无重复；
}

将你的两张图片（

/tiles/robot2/facing_north.png

和

/tiles/plain_4/facing_east.png

）放到云中，并从那里提供链接。正在使用一个有效的实时链接@sergeykuznetsov@sergeykuznetsov查看编辑到问题中的代码片段。这似乎将图标向右偏移，但仍然会切掉头部？请参见：然后添加背景位置：中心哦，现在它居中了！但我有侧剪。请在代码段上编写代码。并尝试背景大小：包含；