三維翻轉scg路徑和raphaeljs

我使用raphaeljs繪製一些六角形的形狀使用rapheal的.path（）方法。這工作得很好。現在我想圍繞y軸旋轉形狀來製作3d翻轉效果，並在用戶懸停在形狀上時顯示形狀的「背面」。據我發現，類似rotateY的東西還不能用於svg，那是對的嗎？三維翻轉scg路徑和raphaeljs

我的問題是：是否有另一種方法來達到這種效果？也許使用CSS轉換？（這可能不適用於IE < 9）或使用某種3x3變換矩陣來僞造效果？

而且我發現this，但我不知道這是否會幫助我，如何與raphaeljs :(

感謝您的幫助！

尼克

來源

2013-08-23 Dafen

你們可以一起使用通過對其進行縮放（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>

你可以使用拉斐爾操作進行了一半，而不是我用簡單的SMIL填充改變形狀，使它看起來就像你所看到的形狀的背面。你也可以用raphael做動畫，雖然raphael不會做SMIL，所以你必須一起使用raphael和javascript來操作transform屬性，以便它逐漸從scale（1,1）變爲scale（1， -1）。

來源

2013-08-24 08:18:13

非常感謝！ – Dafen

三維翻轉scg路徑和raphaeljs

回答

相關問題