我一直使用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.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，并且似乎更大。
Chrome在Z轴上移动转换中心，Safari离开这个中心，但是将对象本身移动到Z轴上。
因此，该对象放大了Safari，并且似乎更大。
我现在将避免转换起点(在Z轴上)，并使用translate-Z来产生相同的效果。
例：