css 背景图旋转 只让背景图片旋转180度的实现示例

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

下图中如果只给.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);}