从等距网格上的图块裁剪出的图像

问题描述

我有一个等距表设置，如下：

<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");
}

它产生了一个站在瓷砖上的小机器人，就像这样：

但是，机器人偏心。因此，要居中，我添加以下CSS：

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

这会将机器人向上移动，但不会向上移动瓷砖，这是完美的！除了，我似乎割断了机器人的头部：

我如何向上移动机器人，以使其看起来位于瓷砖的中心，而不会夹住头部的顶部？我尝试overflow: visible;无济于事。

示例：

.container {
  position: relative;
  z-index: 10;
}

.iso {
  transform: rotateX(60deg) rotateZ(45deg);
  position: absolute;
  border-spacing: 0px;
  left: 200.0px;
  top: 100.0px;
}

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

.background {
  transform: rotateZ(-45deg) rotateY(-60deg) translate3d(-1.1em,-4.8em,0em);
  height: calc(23em);
  width: calc(23em);
  background-size: 100%;
  background-image: url("https://femto.pw/us7j.png"),url("https://femto.pw/r44h.png");
  background-position-y: -2.5em,0em;
  background-repeat: no-repeat;
}

<div class="container">
  <table class="iso">
    <tbody>
      <tr class="row--5 row" style="transform: translateY(0em);">
        <td class="col--5 iso_td" style="transform: translateX(0em);">
          <div class="tile">
            <div class="background"></div>
          </div>
        </td>
        <td class="col--4 iso_td" style="transform: translateX(4em);">
          <div class="tile">
            <div class="background"></div>
          </div>
        </td>
      </tr>
      <tr class="row--4 row" style="transform: translateY(4em);">
        <td class="col--5 iso_td" style="transform: translateX(0em);">
          <div class="tile">
            <div class="background"></div>
          </div>
        </td>
        <td class="col--4 iso_td" style="transform: translateX(4em);">
          <div class="tile">
            <div class="background"></div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

解决方法

.container {
  position: relative;
  z-index: 10;
}

.iso {
  transform: rotateX(60deg) rotateZ(45deg);
  position: absolute;
  border-spacing: 0px;
  left: 200.0px;
  top: 100.0px;
}

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

.background {
  transform: rotateZ(-45deg) rotateY(-60deg) translate3d(-1.1em,-4.8em,0em);
  height: calc(23em);
  width: calc(23em);
  background-size: 100%;
  background-image: url("https://femto.pw/r44h.png");
  background-position-y: -2.5em,0em;
  background-repeat: no-repeat;
  position: relative;
}
.background::before{
content: '';
position: absolute;
top: -80px;
bottom: 0;
left: 0;
right: 0;
background-image: url("https://femto.pw/us7j.png");
background-size: contain;
background-repeat: no-repeat;
}

<div class="container">
  <table class="iso">
    <tbody>
      <tr class="row--5 row" style="transform: translateY(0em);">
        <td class="col--5 iso_td" style="transform: translateX(0em);">
          <div class="tile">
            <div class="background"></div>
          </div>
        </td>
        <td class="col--4 iso_td" style="transform: translateX(4em);">
          <div class="tile">
            <div class="background"></div>
          </div>
        </td>
      </tr>
      <tr class="row--4 row" style="transform: translateY(4em);">
        <td class="col--5 iso_td" style="transform: translateX(0em);">
          <div class="tile">
            <div class="background"></div>
          </div>
        </td>
        <td class="col--4 iso_td" style="transform: translateX(4em);">
          <div class="tile">
            <div class="background"></div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>