如何设置旋转元素背面的样式？

我有一个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/ http://jsfiddle.net/Y89t3/

如果背景不需要重现正面，可以用伪元素来完成：

网页套件演示 http://jsfiddle.net/vals/fSw2E/

CSS 是：

.test { 
    width: 100px;
    height: 100px;
    position: relative;
    left: 30px;
    top: 30px;
    background-color: lightgreen;
    transition: all 2s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

.test:after {
    content: '';
    right: 0px;
    bottom: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(to right, black, transparent);
    -webkit-transform: rotateY( 180deg );
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}


.container:hover .test {
  -webkit-transform: rotateY( 180deg );
}

大部分都是辅助性的东西。唯一有趣的问题是设置伪元素旋转 180 度（作为背面）并将背面可见性设置为隐藏。

我试图保持 div 的原始内容可见，但发现了一些我不明白的东西；我会将其作为一个问题发布