score:1

Accepted answer

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>


Related Query

More Query from same tag