css - React-Motion による回転とスケーリング

Question

React Motion v4で「回転」と「スケーリング」を理解するのに苦労しており、オンラインでそれを行う方法について多くを見つけることができないようです. 以下のような単純な状態変更とともに、単純な css プロパティを簡単に変更できます。

<Motion 
 defaultStyle={{opacity: 0}}
 style={{opacity: spring(this.state.isActive ? 1 : 0, {stiffness: 200, damping: 12})}}>
 {style => 
  <div style={{opacity: style.opacity}} className="action-panel">
   <div id="action-content" className="action-panel-content"></div>
  </div>
 }                            
</Motion>

ただし、たとえば「変換：回転（90度） 」などのより複雑なcssプロパティを使用して上記を行うにはどうすればよいですか？

最後に、ロールオーバーとロールアウトで発生するアニメーションなど、より複雑な状態ロジックが必要な場合や、さまざまな状態が true または false の場合、どこでそれを行うのが最善ですか? React Motion を使用する前は、状態といくつかの条件に基づいて要素のインライン スタイルを更新していましたが、React Motion を使用するだけでこれを行う方法がよくわかりません。あなたの考えは大歓迎です！:D

t xx