我点击我的按钮后地面图像旋转180，因为按钮的行为就像手风琴点击时间打开一个div我的html内容是
<button class="bann"aria-expanded="false" aria-controls="bann">
<span class="bann-text">open</span>
</button>
我只有一个向下箭头的图像。svg它将在点击时间内旋转并显示，scs是
.bann {
border: none;
background-color: transparent;
background: url("../../images/down-arrow.svg") no-repeat center/1.3128205128ex 0.8ex;
&::after {
width: 21.312821ex;
}
&.bann[aria-expanded=true]{
background: url("../../images/down-arrow.svg") no-repeat center/1.3128205128ex 0.8ex;
content:"";
transform:rotate(180deg) !important;
}
我使用上面的scs；打开"；和图像都是旋转的为什么，如何只旋转图像？
解决此问题的一种方法是向后旋转跨度。我根据你的代码创建了这个测试。
index.html(与index.html在同一文件夹中的arrow.svg(
<head>
<style>
.bann {
border: none;
background-color: transparent;
background: url(arrow.svg) no-repeat center/1.3128205128ex 0.8ex;
padding: 40px;
width: 21.312821ex;
position: relative;
overflow: hidden;
}
.bann[aria-expanded=true] {
background: url(arrow.svg) no-repeat center/1.3128205128ex 0.8ex;
transform: rotate(180deg) !important;
}
.bann[aria-expanded=true] span {
transform: rotate(180deg) !important;
}
.bann-text {
display: block;
}
</style>
</head>
<body>
<button class="bann" aria-expanded="true" aria-controls="bann">
<span class="bann-text">te st</span>
</button>
</body>