CSS3 3D 翻转卡片效果与 SVG 元素

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 元素或组“翻转”以显示不同的内容，您需要两个不同的 SVG 元素，当使用 CSS 变换翻转其中一个元素时，它们会将一个元素叠加在另一个元素之上。

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

• IE 将完全忽略它们
• Firefox(v32 及更早版本)和 Chrome(v37 及更早版本)将以不同的方式计算变换原点，因此您需要定位元素，以便 SVG 坐标系原点(Chrome 使用)与边界框原点(Firefox 使用)。
• Chrome 不会翻转单个文本元素。
• SVG 目前没有 z 索引，因此您无法使用它来确保正确的元素位于“顶部”。相反，您必须使用 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>

尽管如此，如果您决定尝试一下并设法让它发挥作用，请回来并留下您的解决方案的另一个答案。