Question

有没有办法在用d3.js创建的SVG中创建类似CSS3 3D翻转卡的效果？

我需要将D3图表的一部分翻转过来，在背面显示不同的内容，类似于this tutorial by David DeSandro中对HTML元素所描述的效果。

animate.css library包括这些效果。有没有办法将它应用到D3图表的某些部分？

Answer 1

您使用d3.js的事实根本不会影响创建3D变换的能力。但是，使用SVG的事实确实使它变得复杂。

SVG有自己的变换系统和坐标系 - 它不直接对应于CSS变换应用于HTML元素的方式。虽然the CSS transforms spec is supposed to apply to SVG，但浏览器实现仍然非常不一致。

正如Lars在评论中所说，如果你想翻转你的整个SVG，只需将CSS转换（如in the answer linked by @Harry所述）应用于父<div>即可。但是，为了使单个SVG元素或组成为＆＃34;翻转＆＃34;为了揭示不同的内容，你需要两个不同的SVG元素，当使用CSS变换翻转其中一个时，它们会在另一个上面强加一个。

你可以将CSS转换应用于各个SVG元素，但要注意：

IE将完全忽略它们
Firefox（v32及更早版本）和Chrome（v37及更早版本）将以不同方式计算变换原点，因此您需要定位元素，使SVG坐标系原点（由Chrome使用）相同作为边界框的起源（由Firefox使用）。
Chrome不会翻转单个文本元素。
SVG目前没有z-index，因此您无法使用它来确保正确的元素位于顶部＆＃34;。相反，您必须使用backface-visibility property隐藏翻转的元素。

以下示例已提取from a longer discussion about CSS transforms and SVG that I wrote on CodePen。在几个不同的浏览器中测试它，以了解您遇到的问题：

＆＃13;

svg.graphic {
  padding:2em 1.2%;
  margin:0;
  float:left;
  overflow:visible;
  shape-rendering:geometricPrecision;
  stroke-width:3;
}
.graphic.CSS {
  -webkit-perspective:500px;
  perspective:500px;
}
.graphic.CSS.spin *{
  -webkit-transition:3s linear;
  transition:3s linear;
  -webkit-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
.graphic.CSS.spin:hover *{
  -webkit-transform:rotateY(360deg);
  transform:rotateY(360deg);
}

＆＃13;

<svg class="graphic CSS spin">
  <g id="svg-shapes">
    <rect width="100%" height="100%" rx="2em" 
          fill="lightblue" stroke="green" />
    <circle r="1.5em" cy="2.5em" cx="70%" 
            fill="lightyellow" stroke="goldenrod" />
    <rect width="5em" height="2em" x="20%" y="2.5em" 
          fill="lavender" stroke="indigo" />
  </g>
  <text x="20%" dx="2.5em" text-anchor="middle" 
        y="2.5em" dy="1em">3D???</text>
</svg>

＆＃13;

如果尽管如此，你决定试一试并设法使其正常运行，请回来并为你的解决方案留下另一个答案。

具有SVG元素的CSS3 3D翻转卡效果

1 个答案: