css – 为什么在Safari,iOS上,transform-origin-z会变形?

前端之家收集整理的这篇文章主要介绍了css – 为什么在Safari,iOS上,transform-origin-z会变形?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直使用3D变换构建棱镜旋转效果。 transform-origin-z属性似乎最适合用于转换棱镜的面,但是Safari 5和Mobile Safari不可思议地拉伸我的元素,即使不应用任何变换。 Firefox 12和Chrome 18正常工作。

Live Demo

Full Prism Demo

我有兴趣了解为什么会发生这种情况。我应该完全避免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.5);
    -webkit-transform-origin: center center -25px;
    -webkit-transform: translate3d(0,0);
  }
</style>

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

解决方法

这似乎是Safari中的一个bug。
Chrome在Z轴上移动转换中心,Safari离开这个中心,但是将对象本身移动到Z轴上。
因此,该对象放大了Safari,并且似乎更大。

我现在将避免转换起点(在Z轴上),并使用translate-Z来产生相同的效果

例:

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

猜你在找的CSS相关文章