Html 三维透视旋转木马在Safari中不工作

我一直在致力于制作一个简单的3d透视旋转木马，它可以在现代浏览器中工作，作为一个原型。我发现了这一点，并在这方面取得了很大的成功

唯一的问题是在Safari中，它从正确的50%原点旋转：

容器：

figure#spinner { 
  transform-style: preserve-3d; 
  height: 300px; 
  transform-origin: 50% 50% -500px; 
  transition: 1s; 
} 

子图像：

figure#spinner img { 
  width: 40%; max-width: 425px; 
  position: absolute; left: 30%;
  transform-origin: 50% 50% -500px;
  outline:1px solid transparent; 
}

我一直在努力想办法解决这个问题，但运气不好

有人知道如何让这个在Safari中从codepen中运行吗？这种设置方式是否存在特定于webkit的问题