为什么transform-origin-z会在Safari,iOS上失真？

Question

我一直在使用3D变换构建棱镜旋转效果.该transform-origin-z属性似乎最适合转换棱镜的面部,但Safari 5和Mobile Safari莫名其妙地拉伸我的元素,即使没有应用变换.Firefox 12和Chrome 18正常工作.

现场演示

全棱镜演示

我很想知道为什么会这样.我应该transform-origin-z完全避免,还是Safari和Mobile 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轴上)并使用translate-Z来产生相同的效果.

例:

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