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

Question

我有figure可旋转（在任何程度上通过用户输入）此旋转使用transition属性可见地旋转。当此元素旋转超过90deg / -90deg时，元素的背面可见。我想要将这个通常隐藏的元素的样式设置为不同于正面样式的样式，但我不确定如何实现这一点。

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

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

当前样式（浏览器默认值）：

期望的风格：

有什么办法可以让元素的背面与前面的方式不同？

以下是此轮换的基本JSFiddle演示（悬停时）：http://jsfiddle.net/Y89t3/

Answer 1

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

webkit demo

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的原始内容可见，并发现了一些我不理解的内容;我会将其作为一个问题发布

Answer 2

转到此处，这将告诉您如何操作http://desandro.github.io/3dtransforms/docs/card-flip.html