我有一个可旋转的图形(在任何程度上通过用户输入)这个旋转使用过渡属性可见地旋转.当此元素旋转超过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的原始内容可见,并发现了一些我不理解的东西;我会将其作为一个问题发布
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。