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

是否有一种方法可以在使用d3.js创建的SVG中创建CSS3 3D翻转卡效果

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

---

这些效果包括这样的效果。有没有办法将其应用于D3图表的某些部分？

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

SVG有自己的转换系统和坐标系，与CSS转换应用于HTML元素的方式不直接对应。尽管如此，浏览器实现仍然非常不一致

正如Lars在评论中所说的，如果您想翻转整个SVG，只需将CSS转换（如所述）应用于父级

。但是，为了使单个SVG元素或组“翻转”以显示不同的内容，您需要两个不同的SVG元素，当使用CSS转换翻转其中一个元素时，它们会将一个元素叠加在另一个元素之上

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

• 我完全不理他们
• Firefox（v32及更早版本）和Chrome（v37及更早版本）将以不同的方式计算变换原点，因此您需要定位元素，使SVG坐标系原点（Chrome使用）与边界框原点（Firefox使用）相同
• Chrome不会翻转单个文本元素
• SVG目前没有z索引，因此不能使用它来确保正确的元素位于“顶部”。相反，您必须使用

下面的示例被提取出来。在两个不同的浏览器中进行测试，了解您遇到的问题：

svg.graphic{
填充物：2米1.2%；
保证金：0；
浮动：左；
溢出：可见；
形状渲染：几何精度；
笔画宽度：3；
}
.graphic.CSS{
-webkit透视图：500px；
透视图：500px；
}
.graphic.CSS.spin*{
-webkit转换：3s线性；
过渡：3s线性；
-webkit转换来源：50%50%；
变换原点：50%50%；
}
.graphic.CSS.spin:悬停*{
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}

3D？？？

当然可以，您可以将CSS应用于SVG或SVG的容器元素（可能具有该转换）。实际上，$（'SVG#myChartId'）.addClass（'animated BounceOutlet'）不起作用，而$（'someDiv'）.addClass（'animated BounceOutlet'）起作用！并非所有适用于HTML的东西都适用于SVG。但是正如我所说的，你可以把你的图表放在一个HTML容器元素中，并将样式应用到其中。谢谢Lars，我实际上需要在d3生成的图表的一部分中创建一个翻转效果。你可以使用转换来实现这一点。这个想法是应用使其翻转的变换，然后简单地添加一个过渡。我试图让它正常工作，因为我需要它用于一个项目：-看看底部的悬停卡。我将svg元素包装在一个div中，并将它们上的类应用到div中，然后将它们从svg中删除。在FF 37.0a2和Chrome 41上，原点和3d对齐似乎是固定的（边框和大小弄乱了，但通过更改css似乎是可以固定的）（尽管在Chrome上，光标离开时的动画由于某些原因持续时间较长）。这是一个解决方案还是我误解了问题所在？@ivy_lynx是的，这是许多问题的实际解决方案。我的演示更多的是一个让这个问题变得困难的例子，而不是一个如何使它工作的仔细考虑！缺少的一件事是为卡片创建两个“面”。您需要嵌套的

s来实现这一点——一个div包裹卡的每一面（一个翻转开始），然后是一个外部div，您可以在其上应用翻转旋转。我不知道Chrome有什么问题——自从我升级到40以后，Codepen上的CSS动画已经被严重破坏了。@AmeliaBR你知道2016年有什么兼容性改进吗？我在caniuse.com上找不到有问题的功能。@IsaacLyman恐怕这个消息还是不好。MS Edge完全不支持应用于SVG元素的CSS转换，而且在其他浏览器中，transform origin&preserve-3D perspective&backface visibility仍然存在缺陷。“对不起……”IsaacLyman很高兴你能适应。如果小心，可以避免变换原点问题，并使用“不透明度播放”替换背面可见性。然后只需确保基本布局/

变换

属性对IE/Edge/等有用。这就是我在本演示中所做的：