25

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

3 回答 3

14

这似乎是 Safari 中的一个错误。Chrome 将转换中心移动到 Z 轴上，Safari 将这个中心保留原样，但将对象本身移动到 Z 轴上。因此，该对象在 Safari 中被放大，并且看起来更大。

我现在会避免使用变换原点（在 Z 轴上）并使用 translate-Z 来产生相同的效果。

例子：

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

于 2012-10-08T15:48:16.993 回答
2

我相信以下解释回答了“为什么”Safari 正在做的事情

我无权访问 Safari 进行测试，但是当我阅读该perspective属性的规范（您指向的同一规范页面）时，它指出：

'perspective' 属性应用与 perspective() 变换函数相同的变换，除了它仅适用于元素的定位或变换子元素，而不适用于元素本身的变换。

更新我如何阅读上述规范

'perspective' 属性应用与 perspective() 变换函数相同的变换

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

除了它仅适用于元素的定位或转换的子元素

这告诉我透视变换将应用于子元素，在这种情况下.face。在这里，似乎有些模棱两可。这是说只有在对子元素进行了另一次变换时才应应用透视图？并且，该tranform-origin属性是否算作对孩子进行的转换（特别是因为该值与perspective转换直接相关）？正是在这个模棱两可的点上，浏览器似乎有所不同。Safari 正在进行perspective转换，因为子元素已tranform-origin设置为-25px，而其他元素显然不是（至少，直到实际的其他元素在动画期间对 进行其他操作）transform。.face

不要对元素本身进行转换

这告诉我z=0of.container是无关紧要的，因为来自这个属性的变换不影响.container，而是影响.container的孩子（即.face）。

因此，Safari 似乎处于您始终应用变换的位置，.face 因为您已设置.container为 have -webkit-perspective: 500px;，因此始终有一个perspective变换应用于子元素（.face在您的情况下）。

请注意，如果您删除动画，并将实际应用于transform: perspective(500px)Firefox或 Chrome，.face您将在 Firefox 或 Chrome 中看到与您在 Safari 中使用代码所体验到的结果相同的结果。

所以我认为实际上，Safari 可能做得正确，而 Firefox 和 Chrome 可能不是。该规范有一些歧义。其他两个浏览器可能仍然应该.container像 Safari 那样应用基于透视变换的透视变换，但肯定看起来不是，而 Safari 显然看起来是。

为了消除这个问题（在“休息”时不让它“突出”），你可能需要

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

我的猜测是#1 会更容易实现，但我不确定。

于 2012-05-02T19:21:49.113 回答
1

我不知道为什么这对我有用。似乎适用于所有浏览器。基本上我认为我正在取消 css 声明效果。

.container {
   perspective: 500px;
   transform-origin: 50% 50% 25px;
}
于 2016-07-25T10:11:53.157 回答