小编Ale*_*.Z.的帖子

Safari 无法正确渲染 180 度旋转的元素。特别是有两个可以显示的示例（使用 Safari 9.1）：

1. 奇数宽度问题。您可以看到（查看边框）底部元素最初相对于其父 div 向右移动 1px，并在过渡时移动更多。
2. 宽度均匀的问题。最初看起来不错，但在过渡时也会向右移动 1px。

这是偶数情况下的 css（奇数情况下只是所有宽度和高度减去 1px）：

.no-overflow-container {
  width: 518px;
  height: 368px;
  margin: 10px;
  overflow: hidden;
}

.container {
  width: 368px;
  height: 368px;
  background: red;
  margin-right: 30px;
  -webkit-transition: margin 350ms;
  -moz-transition: margin 350ms;
  transition: margin 350ms;
}

.container:hover {
  margin-left: 150px;
}

.threed-container {
  width: 100%;
  height: 100%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
  position: relative;
  box-sizing: border-box;
}

.faced-item {
  width: 100%;
  height: 100%;
  border: 1px solid black; …