Question

我已经进行了很多研究，但是找不到任何有用的信息。我尝试进行3D转换。它在所有浏览器（在iOS上除外）上均可正常运行。一旦应用了转换，该元素就会跳转，以使该元素的转换原点位于Z位置0。

因此，如果元素首先位于z位置0，并且元素的变换原点位于其后150像素（-150px），则该元素跳到z位置150，因此变换原点位于z位置0然后。

好像是个错误，还是我忘记了什么？有什么解决方法吗？

这是CSS：

body {
  text-align: center;
  font-size: 2em;
}

#test3d {
  border: #f00 solid 1px;
  width: 300px;
  height: 300px;
  perspective: 600px;
  margin: 50px auto;
}

#test3d > div {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  transform: rotate3d(0, 1, 0, 0deg);
  transform-origin: center center -150px;
  transition: transform 1s;
}

#apply {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

#apply:checked ~ #test3d > div {
  transform: rotate3d(0, 1, 0, 90deg);
}

和HTML：

<input type="checkbox" id="apply" />
<label for="apply">apply transformation</label>

<div id="test3d">
  <div></div>
</div>

，这与笔相同： https://codepen.io/anon/pen/OogJzR

谢谢！

iOS中3D转换起源问题

0 个答案: