我要输出一个句子。当句子出现时，所有单个字母都应通过旋转和变大的方式出现。
我的方法如下:
我所做的是拆分句子并将每个字母放在单独的 span 元素中。然后我使用 ccs 转换 -webkit-transform 转换字母。但是，除非您设置 display: inline-block，否则这在 Chrome 中不起作用。然后旋转按预期工作，但不再显示空格。这导致所有单词都被捆绑在一起。
见下文或 here
let containerDiv = "div.chart";
function displayText(_textArray) {
let sel = d3.select(containerDiv);
// add headers for all strings but the last one
for (let i = 0; i < _textArray.length - 1; i++) {
sel.append("div")
.attr("class", "header h" + i)
.append("h1")
.attr("class", "trans")
.text(_textArray[i]);
}
// add last string by wrapping each letter around a span
// which can be styled individually
let sel2 = sel.append("div")
.attr("class", "header h" + (_textArray.length - 1))
.append("h1")
.style("opacity", 1)
.attr("class", "trans");
const lastString = _textArray[_textArray.length-1];
for (let i = 0; i < lastString.length; i++) {
sel2.append("span")
.attr("class", "color-" + (i % 5))
.text(lastString[i]);
}
}
function transitionLetters(_selection){
_selection
.transition()
.duration(2000)
.delay((d,i) => i * 200)
.style("opacity", 1)
.style("-webkit-transform", "rotate(-720deg) scale(1)");
}
let myText = ["I like to eat", "ham and eggs"];
displayText(myText);
d3.selectAll("span").call(transitionLetters);div.header {
margin: 0 auto;
text-align: center;
width: max-content;
}
h1 span {
opacity: 0;
display: inline-block;
-webkit-transform: rotate(-0deg) scale(0.001);
}
.color-0 { color: rgb(255, 0, 171); }
.color-1 { color: rgb(0, 168, 255); }
.color-2 { color: rgb(171, 0, 255); }
.color-3 { color: rgb(255, 171, 0); }
.color-4 { color: rgb(168, 255, 0); }<script src="https://d3js.org/d3.v4.min.js"></script>
<meta charset="utf-8">
<body>
<div class="chart"></div>
</body>最佳答案
空格在那里，只是没有显示，因为 span 不会显示只有空白的内容。
span { /* or some custom class for those spans */
white-space:pre;
}
来自这个答案:
关于javascript - 如何为主要浏览器(以及 Chrome)转换(旋转)句子中的单个字母，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49286349/