Question

我正在为游戏创建一个3d“舞台”。我包裹了多个包裹的div，以创建不同的轴来移动具有某些内容的中心div。

问题是水平轴和Y轴。 Y必须沿平移镜头旋转移动，以便向前移动“摄像机”使其沿平移镜头轴移动。但是，移动Y轴会与平移div的中心产生一定距离，这意味着任何在Y上具有值的平移都会使平移的中心旋转得越来越远。我需要解决它，以便我可以沿平移（transform: translateY();）包装器的轴移动Y（transform: rotateX()），并将y轴的中心保持在平底锅上，这样任何平移都不会杠杆的y轴。

我已经使用Angular6和Typescript进行了设置，我可以使用鼠标移动的输入来移动轴。

我能想到的最接近的解决方案是对yAxis和Pan使用相同的包装，但是在同一元素上使用rotateX和translateY无效，因为它将原始位置用于translateY

在我有moveX，moveY和Pan的javascript中控制用于移动相机的值。除了zoom和rotate之外，我认为最后两个都不相关，但是我可以根据需要更改所有这些内容。

额外：我的项目中的图片，用于进一步说明https://imgur.com/a/DuDFkgj

以小提琴为例：https://jsfiddle.net/tdrsy6v9/

代码形式的小提琴：

HTML

<div class="level-wrapper plane-a" id="gridWrapper">
  <div class="level-wrapper plane-b"> <!--zoom -->
    <div class="level-wrapper plane-c"> <!-- X axis -->
      <div class="level-wrapper plane-d"> <!-- pan -->
        <div class="level-wrapper plane-e"> <!-- y axis -->
        </div>
      </div>
    </div>
  </div>
</div>

CSS

#gridWrapper {
    height: 300px;
    width:100%;
    overflow: hidden;
    position: relative;
    perspective: 800px;    
    border: 1px solid #525252;
    box-shadow: #ccc 0px 4px 8px 8px; 

}

.level-wrapper {
    position: relative;
    display: inline-block; 
    transform-style: preserve-3d;
    width:50px;
    height:50px
}

.plane-a {
  background: white;
  perspective: 800px;
}

.plane-b {
  background: green;
  transform: translateZ(-25px);
}

.plane-c {
  background: blue;
  transform: translateX(70px);
}

.plane-d {
  background: yellow;
  transform: rotateX(45deg)
}

.plane-e {
  background: purple;
  transform: translateY(70px);
}

Answer 1

您是否尝试过设置transform-origin属性？看看here

CSS转换-模拟摄影机，沿平移轴移动y轴，并保持平移轴的中心

1 个答案: