irpas技术客

css 背景图旋转 只让背景图片旋转180度的实现示例_时间在飞飞_背景图片翻转

网络 3452

?

最近进行二次开发的时候有个图片用背景图要旋转一定角度。

下图中如果只给.question添加背景通过CSS3的transfrom rotate肯定是会影响文字的展示。

所以把背景图放到伪类中进行旋转就可以完美解决这个问题了,话不多说,上代码。

.des-item-7 .inner-box .question{ position:relative; font-size: 16px; font-family: CenturyGothic; font-weight: 400; color: #000000; cursor: pointer; } .des-item-7 .inner-box .question::after{ content:''; position:absolute; right:0; top:50%; width:15px; height:9px; transform:translate(0,-50%); display:block; background-image: url('{{ "question_arrow.jpg" | asset_url}}'); background-repeat: no-repeat; background-position:right 0 center; } .des-item-7 .inner-box .active::after{ transition:all 0.5s; transform: rotate(180deg); }


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #背景图片翻转 #desitem7 #innerbox #Question