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

【问题标题】：How can I style the backface of a rotated element?如何设置旋转元素的背面样式？
【发布时间】：2013-07-05 23:35:16
【问题描述】：

我有一个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/

【问题讨论】：

如果你还没有，我强烈推荐阅读24ways.org/2010/intro-to-css-3d-transforms
@j08691 我之前已经看过Github-hosted version，这是一个很好的介绍。对于卡片翻转（类似于我给出的基本示例），它使用第二个元素作为背面。不过，这并不是我真正想要的，我只是希望能够在不阻塞 HTML 的情况下更改同一元素的背面。
为什么不显示一个“黑”框？

标签： css

【解决方案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 的原始内容保持可见，但发现了一些我不明白的地方；我会把它作为一个问题发布

【讨论】：

嗯，我想这是最好的方法。我根本没有考虑过使用伪选择器！谢谢。
@vals 您的问题与背景颜色有关吗？你能把它链接在这里吗？
@Casimir 这里是我提出的问题的链接stackoverflow.com/q/17533719/1926369

【解决方案2】：

到这里，这里会告诉你怎么做http://desandro.github.io/3dtransforms/docs/card-flip.html

【讨论】：

它使用第二个元素作为背面，这并不是我真正想要的。如果我有 50 个可以同时旋转的元素，那么必须再添加 50 个元素会很麻烦。理想情况下，我正在寻找 CSS 解决方案。
不知道你的意思，但这主要是那个例子中使用的css