为什么transform-origin-z在Safari，iOS上扭曲？ [英] Why does transform-origin-z distort on Safari, iOS?

问题描述

我一直在使用3D变换构建棱镜旋转效果。 transform-origin-z 属性似乎最适合转换棱镜的面，但Safari 5和Mobile Safari不可避免地伸展我的元素，即使没有应用变换。 Firefox 12和Chrome 18可以正常运行。

I've been building a prism rotation effect using 3D transforms. The transform-origin-z property seemed best for transforming the faces of the prism, but Safari 5 and Mobile Safari inexplicably stretch my element, even when no transform is applied. Firefox 12 and Chrome 18 work correctly.

现场演示

完整棱镜演示

我有兴趣了解为什么会发生这种情况。我应该完全避免 transform-origin-z ，还是Safari和Mobile Safari有一些解决方法？

I'm interested in understanding why this happens. Should I avoid transform-origin-z entirely, or is there some workaround for Safari and Mobile Safari?

img src =https://i.stack.imgur.com/na6CQ.pngalt =屏幕截图>

<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>​

推荐答案

似乎这是Safari中的一个错误。
Chrome将变换中心移动到Z轴上，Safari离开这个中心，但将对象本身移动到Z轴上。
对象因此在Safari中放大，看起来更大。

it seems like this is a bug in Safari. Chrome moves the transformation-center over the Z-axis, Safari leaves this center were it was, but moves the object itself over the Z-axis. The object therefore is zoomed in Safari, and seems bigger.

我现在可以避免transform-origin（在Z轴上） -Z产生相同的效果。

I would avoid the transform-origin (on Z-axis) for now and work with translate-Z to produce the same effect.

示例：

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

这篇关于为什么transform-origin-z在Safari，iOS上扭曲？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！