想要实现背景图片鼠标移入左右翻变换背景图的动效，但是移出的时候想要去除掉翻转，直接把背景图片换回来，捣鼓了许多都不知道这么弄，就大神临摹求解。。。
<!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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
호버링 시 반전 효과를 주고, 멀어질 때는 반전 없이 바로 변신하고 싶으신가요? 그런 다음 마우스오버에 전환 속성을 넣기만 하면 됩니다
효과 미리보기: http://codepen.io/zengkan0703...
으아악제가 구현한 코드입니다. 원하는 효과인지는 모르겠습니다.
구현 원리는 실제로 매우 간단하며 주로 CSS3의 전환을 사용합니다. 애니메이션은 두 단계로 나누어집니다:
요소 180도 뒤집기
90도 회전 시 배경 이미지의 URL을 변경합니다.
여기서 주목해야 할 점은 애니메이션이 균등하게 수행되고 90도 뒤집는 타이밍을 제어할 수 있도록 뒤집기 애니메이션의 전환 시간 곡선이 "선형"이어야 한다는 것입니다.
.flipBtn:hover{}에 전환을 작성하고 .flipBtn에 전환: 없음을 추가합니다{};