我一直在努力制作一个简单的3D透视旋转木马,可以在现代浏览器中使用原型。我找到了这个codepen并且已经取得了很大的成功。
唯一的问题是在Safari中它会从适当的50%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;
}
我已经通过Desandro's 3d perspective carousel tutorial试图找出问题而没有运气。
任何人都知道如何让这个代码在Safari中运行吗?是否存在webkit特定问题以及设置方式?