Question

我正在使用raphaeljs使用rapheal的.path（）方法绘制一些六边形。这非常有效。现在我想围绕y轴旋转形状以创建一个3d翻转效果，并在用户将鼠标悬停在形状上时显示形状的“背面”。据我所知，使用svg还不能使用rotateY之类的东西，这是正确的吗？

我的问题是：还有另一种方法可以达到这个效果吗？也许使用CSS Transitions？（这可能不适用于IE＆lt; 9）或使用某种3x3转换矩阵伪造效果？

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

感谢您的帮助！

尼克

Answer 1

您可以通过对其应用比例（1，-1）变换来在y轴上翻转对象。如果要为翻转设置动画，则需要逐渐从缩放（1,1）到缩放（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）。

3D翻转与scg路径和raphaeljs

1 个答案: