小编Mat*_*hew的帖子

我一直在使用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>?