CSS 实现背景图片旋转

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

开发的时候有个图片用背景图要旋转一定角度

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

所以把 背景图 放到 伪类 中进行 旋转 就可以完美解决这个问题了

.question {
  position: relative;
  font-size: 16px;
  font-family: CenturyGothic;
  font-weight: 400;
  color: #000;
  cursor: pointer;
}

.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;
}

.active::after {
  transition: all 0.5s;
  transform: rotate(180deg);
}

---