从等距网格上的图块剪裁出的图像
Images clipping out of tiles on an isometric grid
我有一个等距 table 设置为:
<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, 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>
我有一个等距 table 设置为:
<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, 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>