이미지가 CSS로 뒤집히지 않습니다

Question

이전의 클래스를 적용하면 이미지가 뒤집히지 않습니다.

나는 그것이 작동하지 않는 이유에 대해 다소 고집이났다. Chrome, Firefox 및 IE에서 시도했지만 아무도 작동하지 않았다.

.pbtn { 
 
    background-image: url('../../images/linkpil.png'); 
 
    background-repeat: no-repeat; 
 
    display: inline-block; 
 
    float: left; 
 
    background-position: center center; 
 
    &.first { 
 
    display: none; 
 
    } 
 
    &.next { 
 
    background-color: #C9E2E5; 
 
    } 
 
    .prev { 
 
    -moz-transform: scaleX(-1); 
 
    -o-transform: scaleX(-1); 
 
    -webkit-transform: scaleX(-1); 
 
    transform: scaleX(-1); 
 
    filter: FlipH; 
 
    -ms-filter: "FlipH"; 
 
    } 
 
    a { 
 
    overflow: hidden; 
 
    text-indent: -9999px; //hide text 
 
    height: 15px; 
 
    width: 15px; 
 
    display: inline-block; 
 
    } 
 
}

<div class="pbtn"> 
 
    <a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&amp;driftPage=1" class="driftPageprev prev"></a> 
 
    <a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&amp;driftPage=1" class="driftPagenext next"></a> 
 
</div>

Answer 1

코드가 적어 짐에 따라 html이 이와 같아야합니다. 와

<div class="pbtn next"> 
    <a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&amp;driftPage=1" class="driftPagenext"></a> 
</div> 
<div class="pbtn prev"> 
    <a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&amp;driftPage=1" class="driftPageprev"></a> 
</div> 

및 교체

&.next { 
background-color: #C9E2E5; 
} 
.prev { 
-moz-transform: scaleX(-1); 
-o-transform: scaleX(-1); 
-webkit-transform: scaleX(-1); 
transform: scaleX(-1); 
filter: FlipH; 
-ms-filter: "FlipH"; 
} 

: CSS 아니다

&.next { 
background-color: #C9E2E5; 
} 
&.prev { 
-moz-transform: scaleX(-1); 
-o-transform: scaleX(-1); 
-webkit-transform: scaleX(-1); 
transform: scaleX(-1); 
filter: FlipH; 
-ms-filter: "FlipH"; 
} 

Answer 2

변환하는 a에 아무것도 없기 때문에 귀하의 CSS는 아무것도 할 것입니다.

배경 이미지가 부모에 있으며 콘텐츠 또는 이미지가 a에 없습니다. 변환에 대해서는 잘 알고 있지만 아무것도 볼 수 없습니다.