带有 svg 路径和 raphael js 的 3D 翻转答案

【问题标题】：3D flip with scg path and raphaeljs带有 svg 路径和 raphael js 的 3D 翻转
【发布时间】：2013-08-27 01:44:32
【问题描述】：

我正在使用 raphaeljs 使用 rapheal 的 .path() 方法绘制一些六边形。这很好用。现在我想围绕 y 轴旋转形状以创建 3d 翻转效果，并在用户将鼠标悬停在形状上时显示形状的“背面”。据我发现，svg 还无法实现类似 rotateY 的功能，对吗？

我的问题是：还有其他方法可以产生这种效果吗？也许使用 CSS 过渡？（这可能在 IE

我也找到了this，但我不确定它是否对我有帮助以及如何将它与 raphaeljs 一起使用:(

感谢您的帮助！

尼克

【问题讨论】：

标签： html css svg raphael transformation

【解决方案1】：

您可以通过对其应用 scale(1, -1) 变换来沿 y 轴翻转对象。如果要为翻转设置动画，则需要将变换从 scale(1, 1) 逐渐变为 scale(1, -1)

这里有一个原始 SVG 基本概念的简单示例。

<svg xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(0, 100)">
    <path transform="translate(0, -50)" fill="red"  d="M 75,10 L 25,90 L 125,90 z">
      <set attributeName="fill" to="lime" begin="0.5s" fill="freeze" />
    </path>
      <animateTransform attributeName="transform"
       attributeType="XML" type="scale" from="1, 1" to="1, -1" dur="1s" additive="sum" fill="freeze" />
  </g>
</svg>

您可以使用 raphael 在中间点操纵形状，而不是我使用的简单的 SMIL 填充更改，这样您就可以看到形状的背面。你也可以使用 raphael 来做动画，虽然 raphael 不会做 SMIL，所以你必须一起使用 raphael 和 javascript 来操作 transform 属性，以便它逐渐从 scale(1, 1) 变为 scale(1, -1)。

【讨论】：