css怎么解决hover鼠标移除后的效果

想要实现背景图片鼠标移入左右翻变换背景图的动效，但是移出的时候想要去除掉翻转，直接把背景图片换回来，捣鼓了许多都不知道这么弄，就大神临摹求解。。。

<!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>
      <div class="flipBtn_face flipBtn_mid"></div>
      <div class="flipBtn_face flipBtn_front"></div>
    </li>
  </ul>
</body>
</html>

阅读 9.6k

<!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> <div class="box"></div> </body> </html>

css怎么解决hover鼠标移除后的效果

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何在浏览器开发者工具中导入本地JS文件并直接运行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？