플립 CSS 애니메이션 중에 이미지가 바뀜

Question

나는 현재 회전하는 이미지가 애니메이션 CSS를 사용하여 뒷면에 쓰고 있지만, 원하는 것은 이미지가 다른 이미지로 바뀌면 단색으로 바뀝니다. 대신 반전 된 버전의 이미지를 사용하십시오.

CSS

.hover-img { 
position: relative; 
width: 400px; 
height: 300px; 
-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
transition: all 1s ease-in-out; 
background:url(bbclike/topright.png); 
-webkit-transform:rotateY(180deg); 
-webkit-transform-style: preserve-3d; 
    line-height:200px; 
text-align:center; 
font-size:0; 

} 
.hover-img:hover{ 
-webkit-transform:rotateY(0deg); 
font-size:14px; 
color:white; 
background-color:#FF0; 

} 

HTML 당신은 사용자가 사업부를 놓을 때 원하는대로 그냥 가져가 섹션에 넣어

<div class="hover-img"> 
Text Goes Here 
</div> 

Answer 1

... 일예로 :

.hover-img:hover{ 
background:url(---HERE IMAGE 2---); 
font-size:14px; 
color:white; 
background-color:#FF0; 
} 

이 바이올린 데모에게 근무 당신이 DOM 클래스를 조작 할 수 있도록

http://jsbin.com/tejiduq/1/edit?html,css,output

변화 컨테이너 클래스를이 밖으로 시도 할 수 있습니다 here

Answer 2

.

//html 
<div> 
    <i class="icon"></i> 
</div> 
<br> 
<input class="button" type="button" value="flip"> 

//css 
div{ 
} 
.icon { 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    transition: all 0.5s; 
} 

div .icon { 
    background: url("https://www.w3schools.com/images/compatible_chrome.gif") no-repeat; 
} 

div.ie .icon{ 
    background: url("https://www.w3schools.com/images/compatible_edge.gif") no-repeat; 
    transform: scaleX(-1) 
} 

//javascript 
$(".button").click(function() { 
    $("div").toggleClass("ie"); 
}); 

희망이 있으면 유용 할 것입니다.