CSS变换旋转属性使文本消失

Question

我使用D3将文字添加到svg中的div，然后为文本

分配一个班级label

d3.select('#myDiv').select('svg').append('g')
.append('text')
.text('myText')
.attr('x', xPosition)
.attr('y', yPosition)
.attr('class', 'label');

然后我用CSS来设置它的样式

.label {
    font-family: sans-serif;
    font-size: 1em;
    transform: rotate(90deg);
}

问题是文本是不可见的。如果我使用控制台检查元素并取消选择transform: rotate()，则会再次出现该文本。但是，当我重新激活该属性时，文本会再次隐藏。

我已尝试使用Chrome62和Firefox55，两种浏览器的行为都相同。