想要实现背景图片鼠标移入左右翻变换背景图的动效，但是移出的时候想要去除掉翻转，直接把背景图片换回来，捣鼓了许多都不知道这么弄，就大神临摹求解。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D</title>
<style>
ul li{
list-style: none;
cursor: pointer;
position: relative;
}
.flipBtn, .flipBtn_face{
position: absolute;
width:167px;
height:116px;
}
.flipBtn {
transition: transform 0.4s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
float: left;
}
.flipBtn_front{
backface-visibility: hidden;
}
.flipBtn_front{
width:151px;
height:100px;
margin:8px;
background:url(./image/pic00.jpg) no-repeat;
}
.flipBtn_back{
width:151px;
height:100px;
margin:8px;
background:url(./image/pic01.jpg) no-repeat;
}
.flipBtn_mid.flipBtn_face{
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
}
.flipBtn:hover{
transform:rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
</style>
</head>
<body>
<ul class="flipBtnWrapper">
<li class="flipBtn">
<a class="flipBtn_face flipBtn_back"></a>
<p class="flipBtn_face flipBtn_mid"></p>
<p class="flipBtn_face flipBtn_front"></p>
</li>
</ul>
</body>
</html>
ringa_lee2017-04-17 15:26:39
效果預覽：http://codepen.io/zengkan0703...
這是我實現的程式碼，不知道是不是你想要的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background:url(http://www.w3school.com.cn/i/site_photoref.jpg) no-repeat;
transition: transform 0.5s linear ,background-image 0s 0.25s;
background-size: cover;
}
.box:hover{
transform: rotateY(180deg);
transform-origin: center;
background-image: url(http://www.w3school.com.cn/i/site_photoqe.jpg);
}
</style>
</head>
<body>
<p class="box"></p>
</body>
</html>實作原理其實很簡單，主要是用 css3 的過渡 transition。動畫分為兩步：
元素翻轉 180 度
翻轉到 90 度的 時候，更換背景圖片的 url。
這裡面要注意的是，翻轉動畫的過渡時間曲線應該用 “linear”，這樣才能保證這個動畫是均勻進行的，就能夠控制好翻轉 90 度的時機。
