为什么变换起源-Z歪曲Safari浏览器，iOS的？(Why does transform-orig

我已经建立使用3D变换棱镜旋转效果。该transform-origin-z属性似乎最适合转化棱镜的面孔，但Safari 5及移动Safari浏览器莫名其妙地伸展我的元素，即使没有变换应用。火狐12和Chrome 18工作正常。

现场演示

全棱镜演示

我感兴趣的是理解为什么会这样。我应该避免transform-origin-z完全，或者是有一些解决方法Safari和移动Safari浏览器？

<style>
  /* other browser prefixes omitted for brevity */
  .container {
    margin: 50px;
    border: 2px solid #00f;
    height: 50px;
    -webkit-perspective: 500px;
  }
  .face {
    height: 50px;
    background-color: rgba(255,0,0,0.5);
    -webkit-transform-origin: center center -25px;
    -webkit-transform: translate3d(0,0,0);
  }
</style>

<div class="container">
  <div class="face"></div>
</div>

Answer 1:

看起来这是在Safari中的错误。 Chrome的移动变换中心在Z轴，Safari浏览器离开这个中心是它是，但在Z轴移动对象本身。因此，该对象被放大Safari和似乎更大。

我将避免变换原点（在Z轴）现在与翻译-Z合作，以产生同样的效果。

例：

http://jsfiddle.net/willemvb/GuhcC/3/

Answer 2:

我相信下面的解释回答“为什么”的Safari浏览器正在做的是什么

我没有访问Safari浏览器进行测试，但只要我阅读的详细规格perspective属性（你指向同规格页），它规定：

在“透视”属性应用相同的变换，则透视（）变换函数，所不同的是它仅适用于该元件的定位或转化的孩子，而不是该元件本身上的变换。

更新我如何阅读上述规格

在“透视”属性应用相同的变换，则透视（）变换函数

这告诉我一个透视变换将要完成，就如同transform: perspective(500px)在这种情况下被应用。

不同之处在于它仅适用于该元件的定位或转化的儿童

这告诉我透视变换将被应用到子元素，在这种情况下.face 。在这里，似乎有一些不确定性。的就是这句话的角度应该只应用于如果另一个变换的子元素上做了什么？而且，做了tranform-origin财产算不算一个转换正在做的孩子（特别是因为它是这个值，它直接关系到perspective变换）？ 正是在这一点上模棱两可的是，浏览器似乎有所不同。 Safari浏览器是做perspective变换，因为子元素具有tranform-origin设置为-25px ，而其他人显然都没有（至少，直到实际其它transform做别的事情了.face动画时）。

不变换元素本身

这告诉我， z=0的.container是无关紧要的，因为从这个属性是不影响改造.container ，而是.container的儿童（即.face ）。

所以，Safari浏览器似乎正在你的位置.face 总是有一个转换应用 ，因为你已经设置.container有-webkit-perspective: 500px; ，所以总有一个perspective变换被应用到子元素（ .face你的情况）。

请注意，如果你拿走的动画，并应用实际transform: perspective(500px)的.face你会看到在Firefox或Chrome相同的结果，你在狩猎体验与您的代码。

所以我觉得其实，Safari浏览器，可以进行正确的练习 ，而Firefox和Chrome或许不是。 该规范具有一定的模糊性。其他两个浏览器或许应该还是应用透视变换基于关闭.container像Safari浏览器也，但肯定似乎不应该，而Safari浏览器显然似乎是。

为了消除这个问题（没有它“伸出”当“静止”），你可能需要

动画的transform-origin本身在动画的开始（并重置为0之后），或者 ......
动画perspective值本身为0时“静止”和500px动画时。

我的猜测是＃1会更容易实现，但我不知道。

Answer 3:

我不知道为什么，这为我工作。似乎在所有的浏览器。基本上我觉得我取消CSS声明的效果。

.container {
   perspective: 500px;
   transform-origin: 50% 50% 25px;
}

文章来源: Why does transform-origin-z distort on Safari, iOS?