我有一个可旋转的图形(在任何程度上通过用户输入)这个旋转使用过渡属性可见地旋转.当此元素旋转超过90deg / -90deg时,元素的背面可见.我想要将这个通常隐藏的元素的样式设置为不同于正面样式的样式,但我不确定如何实现这一点.
figure {
background:#fff;
color:#000;
border:1px solid #000;
transition:1s;
}
figure:hover {
transform:rotateY(180deg);
}
当前样式(浏览器默认值)：
期望的风格：
有什么方法可以将元素的背面与前面的方式区别开来？
以下是此轮换的基本JSFiddle演示(悬停时)：http://jsfiddle.net/Y89t3/
解决方法
如果背景不需要重现前面,可以使用伪元素完成：
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的原始内容可见,并发现了一些我不理解的东西;我会将其作为一个问题发布
