d3 svg attrtween each by each - d3.js

Question

demo
The demo as you can see, I want to do the effect that the box rotates by itself like the red boxes below (div version).
I try to use svg to rewrite it, but svg version seems to rotate all svg
How can I let them rotate by themselves like the div version???
Here is the svg version's main logic:
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)');
})
})

Answer 1

Add the following to get the SVG elements to transform around their centres.
g {
transform-origin: center center;
transform-box: fill-box;
}
E.g.
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)');
})
})
d3.selectAll('div.box')
.each(function (data, index) {
d3.select(this)
.transition('t3')
.delay(800)
.duration(2500)
.styleTween('transform', function () {
return d3.interpolateString('rotateY(0deg)', 'rotateY(360deg)');
})
})
rect {
fill:rgb(121,0,121);
stroke-width:1;
stroke:rgb(0,0,0);
}
.section {
display: flex;
}
.box {
margin: 10px;
width: 50px;
height: 50px;
background-color: red;
}
g {
transform-origin: center center;
transform-box: fill-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<h3>still trying: </h3>
<div>
<svg width="800" height="100">
<g>
<rect x="10" y="30" width="50" height="50"></rect>
</g>
<g>
<rect x="70" y="30" width="50" height="50"></rect>
</g>
<g>
<rect x="130" y="30" width="50" height="50"></rect>
</g>
<g>
<rect x="190" y="30" width="50" height="50"></rect>
</g>
</svg>
</div>
<h3>expected: </h3>
<div class="section">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
</div>