使用CSS实现等轴测视角，并在其中包含非等轴子元素

Question

使用CSS实现等轴测视角，并在其中包含非等轴子元素

4

我正在使用transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);使一个元素看起来像是在等距投影中。我想知道如何针对某些子元素恢复效果，使它们共享坐标系，但仍然是正常对齐的。我试过将子元素以相同方式旋转回来，但似乎效果不同。有什么想法吗？

.iso {
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  transform-style: preserve-3d;


  position: relative;
  height: 20rem;
  width: 20rem;
  text-align: center;
  margin: 0 auto;
  background-color: tomato;
  box-sizing: border-box;
  padding: 2rem;
}

.marker {
  position: absolute;
  left: 10rem;
  top: 15rem;
  transform: rotateX(-60deg) rotateY(0deg) rotateZ(45deg);
}

<div class="iso">
  <h3>I'm also iso aligned</h3>

  <div class="marker">
    <svg xmlns='http://www.w3.org/2000/svg' height='30' width='27' viewBox='0 0 25 30'><path stroke="#FFFFFF" stroke-width="2" fill='29434e' d='M13.6363636,0.272727273 C16.6363636,0.272727273 19.6363636,1.63636364 21.8181818,3.81818182 C24,6.27272727 25.3636364,9 25.3636364,12.2727273 C25.3636364,15.5454545 24,19.0909091 21.8181818,21.2727273 L13.6363636,29.7272727 L5.45454545,21.2727273 C3.27272727,19.0909091 1.90909091,15.8181818 1.90909091,12.2727273 C1.90909091,9 3,6.27272727 5.45454545,3.81818182 C7.63636364,1.63636364 10.6363636,0.272727273 13.6363636,0.272727273 Z'/></svg></div>
</div>

- wiesson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

您应该改变transform-origin的设置，将其设置为底部，然后使用下面的相反变换。您不仅需要反转值，还要反转顺序。

增加了一个额外的没有进行变换的标记以进行比较

.iso {
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  transform-style: preserve-3d;


  position: relative;
  height: 20rem;
  width: 20rem;
  text-align: center;
  margin: 0 auto;
  background-color: tomato;
  box-sizing: border-box;
  padding: 2rem;
}

.marker {
  position: absolute;
  left: 10rem;
  top: 15rem;
  transform: rotateZ(45deg) rotateY(0deg) rotateX(-60deg);
  transform-origin:bottom center;
}
.compare {
  position:absolute;
  left: 15rem;
  top: 10rem;
}

<div class="iso">
  <h3>I'm also iso aligned</h3>

  <div class="marker">
    <svg xmlns='http://www.w3.org/2000/svg' height='30' width='27' viewBox='0 0 25 30'><path stroke="#FFFFFF" stroke-width="2" fill='29434e' d='M13.6363636,0.272727273 C16.6363636,0.272727273 19.6363636,1.63636364 21.8181818,3.81818182 C24,6.27272727 25.3636364,9 25.3636364,12.2727273 C25.3636364,15.5454545 24,19.0909091 21.8181818,21.2727273 L13.6363636,29.7272727 L5.45454545,21.2727273 C3.27272727,19.0909091 1.90909091,15.8181818 1.90909091,12.2727273 C1.90909091,9 3,6.27272727 5.45454545,3.81818182 C7.63636364,1.63636364 10.6363636,0.272727273 13.6363636,0.272727273 Z'/></svg></div>
</div>
<!-- to compare with -->
<svg class="compare" xmlns='http://www.w3.org/2000/svg' height='30' width='27' viewBox='0 0 25 30'><path stroke="#FFFFFF" stroke-width="2" fill='29434e' d='M13.6363636,0.272727273 C16.6363636,0.272727273 19.6363636,1.63636364 21.8181818,3.81818182 C24,6.27272727 25.3636364,9 25.3636364,12.2727273 C25.3636364,15.5454545 24,19.0909091 21.8181818,21.2727273 L13.6363636,29.7272727 L5.45454545,21.2727273 C3.27272727,19.0909091 1.90909091,15.8181818 1.90909091,12.2727273 C1.90909091,9 3,6.27272727 5.45454545,3.81818182 C7.63636364,1.63636364 10.6363636,0.272727273 13.6363636,0.272727273 Z'/></svg>

相关问题以更好地理解次序的重要性：

使用translate模拟transform-origin

为什么变换的顺序很重要？SVG旋转/缩放与缩放/旋转结果不同