每个

Question

demo

你可以看到这个演示，我想像盒子下面的红色框一样自动旋转这个效果（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)');
      })
  })

Answer 1

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

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>