0

私はraphaeljsを使用して、rapheal の .path() メソッドを使用していくつかの六角形を描画しています。それはかなりうまくいきます。ここで、y 軸を中心に形状を回転させて、3D フリップ効果を作成し、ユーザーが形状にカーソルを合わせたときに形状の「背面」を表示したいと考えています。私が知る限り、rotateY のようなものはまだ svg では使用できないのですが、それでよろしいですか?

私の質問は: この効果を得る別の方法はありますか? たぶんCSSトランジションを使用していますか？(これはおそらく IE < 9 では機能しません) または何らかの 3x3 変換マトリックスを使用して効果を偽造するには?

また、私はこれを見つけましたが、それが私に役立つかどうか、そしてそれをraphaeljsと一緒に使用する方法がわかりません:(

助けてくれてありがとう！

ニック

4

1 に答える 1

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>

私が使用した単純な SMIL 塗りつぶしの変更の代わりに、raphael を使用して中間点で形状を操作し、形状の裏側を見ているように見せることができます。また、raphael を使用してアニメーションを実行することもできますが、raphael は SMIL を実行しないため、raphael と javascript を一緒に使用して変換属性を操作し、scale(1, 1) から scale(1, 1, 1) に徐々に変化させる必要があります。 -1)。

于 2013-08-24T08:18:13.377 に答える