我写了一个应用程序，它对文本元素进行动画处理(每个字母都在一个span元素内(。
我在Internet Explorer 11中看到以下奇怪的效果(在Chrome中一切正常(：
场景 1：
letters
.style("-webkit-transform", "rotate(-0deg) scale(.001)")
.style("-ms-transform", "rotate(-0deg) scale(.001)")
.style("-mozilla-transform", "rotate(-0deg) scale(.001)")
.style("transform", "rotate(-0deg) scale(.001)")
.transition()
.style("-webkit-transform", "rotate(-720deg) scale(1)");
.style("-ms-transform", "rotate(-720deg) scale(1)");
.style("-mozilla-transform", "rotate(-720deg) scale(1)")
.style("transform", "rotate(-720deg) scale(1)");
我的意图是：显示几乎不可见的字母(scale.001(并将它们转换为常规大小，同时旋转两次。
我的方法：据我所知，这似乎是正确的方法。(你在这里看到 d3.js 版本的过渡，这对我的理解应该无关紧要(。 对于某些不支持常规transform属性的浏览器，transformCSS 样式首先带有前缀。在这些浏览器实现所需的属性后，它可以并且应该由常规属性(不带前缀(调用。因此，常规属性应称为最后，以确保行为正常。
结果：
这在 Chrome 中工作正常，但在 IE 11 中，缩放过渡有效，但没有旋转。
场景 2：
(仅使用转换的前缀版本，删除常规的裸骨转换(
letters
.style("-webkit-transform", "rotate(-0deg) scale(.001)")
.style("-ms-transform", "rotate(-0deg) scale(.001)")
.style("-mozilla-transform", "rotate(-0deg) scale(.001)")
.transition()
.style("-webkit-transform", "rotate(-720deg) scale(1)");
.style("-ms-transform", "rotate(-720deg) scale(1)");
.style("-mozilla-transform", "rotate(-720deg) scale(1)");
这不应该是正确的方法，因为 IE 11 已经实现了转换。但是，这将产生正确的结果(对于 IE 11(。
场景 3：
我刚刚打开网站： https://css-tricks.com/almanac/properties/t/transform/在Internet Explorer 11中，"常规"CSS转换旋转将根据需要显示。这些示例嵌入在 Codepen 中。
我有以下问题：
为什么场景 1 在 IE 11 中不起作用？(也尝试过各种没有效果的改变，比如只是旋转不缩放等(？
场景 2 有效，但似乎不是要走的路，因为我必须省略常规的准系统转换属性。我不走这条路是对的吗？
在场景 3 中，常规转换工作正常，唯一的区别似乎是，它嵌入在 Codepen 中。这是什么原因 - 它是否有助于我们找到问题 1 的解决方案(它应该在 Web 服务器上运行而不是在 codepen 中？
p.s. 在堆栈溢出中，我发现了这个相关问题(旋转和缩放在 IE11 中不起作用(，但它没有帮助。
5月30日更新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
span {display: inline-block;}
</style>
</head>
<body>
<script>
var letters1 = d3.select("body")
.selectAll("span.notWorking")
.data("Hello stackoverflow!")
.enter()
.append("span")
.attr("class", "notWorking");
//this is desirable but doesn't work in IE11:
// transform rotate doesn>'t work, but e.g. transform scale does
letters1
.style("-ms-transform", "rotate(0deg)")
.style("transform", "rotate(0deg)")
//.style("transform", "scale(0.01)")
.text(function(d){return d;})
.transition()
.style("-ms-transform", "rotate(720deg)")
.style("transform", "rotate(720deg)");
//.style("transform", "scale(1)");
var letters2 = d3.select("body")
.selectAll("span.working")
.data("Hello stackoverflow!")
.enter()
.append("span")
.attr("class", "working");
//this is not desirable (since the regular transform can't be used) but works in IE11:
letters2
.style("-ms-transform", "rotate(0deg)")
.text(function(d){return d;})
.transition()
.style("-ms-transform", "rotate(720deg)");
</script>
</body>
</html>
任何帮助将不胜感激！
我无法让您的极简主义示例在任何浏览器中工作。d3在插入转换字符串时遇到问题。 相反，如果我使用.tween并手动进行插值，它似乎可以在IE11中工作(我尝试了chrome，IE11和Edge(：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
span {display: inline-block;}
</style>
</head>
<body>
<script>
var letters1 = d3.select("body")
.selectAll("span.working")
.data("Hello stackoverflow!")
.enter()
.append("span")
.attr("class", "working");
letters1
.style("transform", "rotate(0deg)scale(0.01)")
.text(function(d){return d;})
.transition()
.duration(2000)
.tween("transform", function() {
var node = d3.select(this),
s = d3.interpolateNumber(0.01, 1),
r = d3.interpolateNumber(0, 720);
return function(t) {
node.style("transform", "rotate(" + r(t) + "deg)scale(" + s(t) + ")");
};
});
</script>
</body>
</html>