search

Home  >  Q&A  >  body text

javascript - 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>
      <p class="flipBtn_face flipBtn_mid"></p>
      <p class="flipBtn_face flipBtn_front"></p>
    </li>
  </ul>
</body>
</html>
大家讲道理大家讲道理2782 days ago1026

reply all(3)I'll reply

  • 伊谢尔伦

    伊谢尔伦2017-04-17 15:26:39

    Do you want to have an inversion effect when hovering, but directly transform without inversion when moving away? Then you just put the transition attribute in hover

    reply
    0
  • ringa_lee

    ringa_lee2017-04-17 15:26:39

    Effect preview: http://codepen.io/zengkan0703...
    This is the code I implemented. I don’t know if it is the effect you want: 

    <!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>

    The implementation principle is actually very simple, mainly using the transition of css3. The animation is divided into two steps:

    1. Flip element 180 degrees

    2. Change the url of the background image when flipped to 90 degrees.

    What needs to be noted here is that the transition time curve of the flip animation should be "linear", so as to ensure that the animation is carried out evenly and the timing of flipping 90 degrees can be controlled.

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-17 15:26:39

    Write the transition in .flipBtn:hover{} and add transition: none in .flipBtn{};

    reply
    0
  • Cancelreply