D3.js d3 svg在每个人之间

正如您所看到的演示，我想做的效果是，框自身旋转，就像下面的红色框一样（div版本）

我尝试使用svg重写它，但svg版本似乎可以旋转所有svg 我怎样才能让它们像div版本那样自行旋转

以下是svg版本的主要逻辑：

d3.selectAll('g')
  .each(function (data, index) {
    d3.select(this)
      .transition('t3')
        .delay(800)
        .duration(2500)
        .styleTween('transform', function () {
        return d3.interpolateString('rotateY(0deg)', 'rotateY(360deg)');
      })
  })

---

添加以下内容以使SVG元素围绕其中心进行变换

g {
  transform-origin: center center;
  transform-box: fill-box;
}

例如

d3.选择全部（'g'）
.每个功能（数据、索引）{
d3.选择（本）
.transition（'t3'）
.延迟（800）
.持续时间（2500）
.styleTween（'transform'，function（）{
返回d3.内插线（'rotateY（0度）'，'rotateY（360度）'）；
})
})
d3.选择全部（'div.box'）
.每个功能（数据、索引）{
d3.选择（本）
.transition（'t3'）
.延迟（800）
.持续时间（2500）
.styleTween（'transform'，function（）{
返回d3.内插线（'rotateY（0度）'，'rotateY（360度）'）；
})
})

rect{
填充：rgb（121,0121）；
笔画宽度：1；
行程：rgb（0,0,0）；
}
.科{
显示器：flex；
}
.box{
利润率：10px；
宽度：50px；
高度：50px；
背景色：红色；
} 
g{
变换原点：中心；
变换框：填充框；
}

仍在努力：
预期：
A.
B
C
D