我如何风格旋转元素的背面？ [英] How can I style the backface of a rotated element?

问题描述

我有一个图它是可旋转的（通过用户输入的任何程度），这个旋转使用转换可视地旋转属性。当该元素旋转超过90deg / -90deg时，元素的背面是可见的。我想把元素的这个通常隐藏的一面与前面的样式不同，但我不知道这是如何实现的。

I have a figure which is rotatable (to any degree via user input) this rotation visibly rotates using the transition property. When this element is rotated by more than 90deg/-90deg the backface of the element is visible. I'm wanting to style this usually-hidden side of the element differently to how the front side is styled, but I'm not sure how this can be achieved.

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

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

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

b $ b

Current Style (Browser Default):

有什么办法可以用不同于前面的方式设置元素的背面吗？

Is there any way I can style the backface of an element differently to the front?

这里是一个基本的JSFiddle旋转（悬停时）： http://jsfiddle.net/Y89t3/

Here is a basic JSFiddle demo of this rotation (on hover): http://jsfiddle.net/Y89t3/

推荐答案

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

If the background doesn't need to reproduce the front, it can be done with a pseudo element:

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度（作为背面），并将背面可见性设置为隐藏。

Most of it is auxiliary stuff. The only interesting issues are setting the pseudo element rotated 180 deg (as the backface) and setting backface visibility to hidden.

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

I have tried to keep the original content of the div visible, and found something that I don't understand; I will post that as a question

这篇关于我如何风格旋转元素的背面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！