css - 回転した要素の背面をスタイルするにはどうすればよいですか?

Question

私はfigure（ユーザー入力を介して任意の程度に）回転可能な を持っています。この回転は、transitionプロパティを使用して目に見えて回転します。この要素を 90 度/-90 度以上回転させると、要素の背面が表示されます。この要素の通常は隠されている側を、前面のスタイルとは異なるスタイルにしたいのですが、これをどのように実現できるかわかりません。

figure {
    background:#fff;
    color:#000;
    border:1px solid #000;
    transition:1s;
}

figure:hover {
    transform:rotateY(180deg);
}

現在のスタイル (ブラウザのデフォルト):

希望のスタイル:

要素の背面を前面とは異なるスタイルにする方法はありますか?

これは、このローテーションの基本的な JSFiddle デモです (ホバー時): http://jsfiddle.net/Y89t3/