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/

Answer 1

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

webkit 演示

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