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

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 在 cmets 中所说，如果您想翻转整个 SVG，只需将 CSS 转换（如 in the answer linked by @Harry 所述）应用于父 <div>。但是，为了让单个 SVG 元素或组“翻转”以显示不同的内容，您需要两个不同的 SVG 元素，当其中一个使用 CSS 变换翻转时，它们将一个叠加在另一个之上。

您可以将 CSS 转换应用于单个 SVG 元素，但请注意：

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

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

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);
}

<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>

尽管如此，如果您决定试一试并设法使其正常工作，请回来并在您的解决方案中留下另一个答案。