我刚刚遇到了一个非常奇怪的问题，它只出现在 Safari 10 中。我有扑克牌、svg 图像，有时会使用 transform:rotate(xdeg) 进行旋转。
我正在使用的卡有一个红色的块图案。当它不旋转，或以直角旋转时，即90、180、270，那么它看起来是正常的。但是，除此之外的任何其他角度，背景图案都会变成蓝色！我刚刚从我的一个用户那里得到了一份关于此的报告，并且从未见过任何奇怪的事情。其他浏览器都正常，Safari 9 正常。
我猜这只是 Safari 10 中一个非常奇怪的错误，但是关于如何解决它的任何想法？我在以下位置创建了一个最小的复制：
https://jsfiddle.net/2zv4garu/1/
确实很奇怪的错误。在将 g 元素包装为 SVG 转换时执行转换并不能解决问题。
但是，通过执行 3D 旋转而不是 2D 旋转，即 inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)'; 确实可以解决问题，您可以在此处查看。
https://jsfiddle.net/qe00s1mg/
https://i.stack.imgur.com/EA8nD.png
