[英]changing image during flip css animation
我目前有一個旋轉的圖像,可以翻轉,並使用動畫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>
只要用戶將div懸停在鼠標懸停部分上,無論您想要什么。
.hover-img:hover{
background:url(---HERE IMAGE 2---);
font-size:14px;
color:white;
background-color:#FF0;
}
在這里工作小提琴演示
您可能想嘗試一下
http://jsbin.com/tejiduq/1/edit?html,css,輸出
更改容器類,以便可以操作DOM類。
//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");
});
希望這對您有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.