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

Question

我有一个 figure 可以旋转(通过用户输入旋转到任何 Angular )这个旋转使用 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 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 的原始内容保持可见，但发现了一些我不理解的地方；我会将其作为问题发布