84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
想要实现背景图片鼠标移入左右翻变换背景图的动效，但是移出的时候想要去除掉翻转，直接把背景图片换回来，捣鼓了许多都不知道这么弄，就大神临摹求解。。。
3D
光阴似箭催人老，日月如移越少年。
你是想hover的时候有反转的效果，而移开时直接变换没有反转？那你把transition这个属性放在hover里就行了
效果预览：http://codepen.io/zengkan0703...这是我实现的代码，不知道是不是你想要的效果：
Document
实现原理其实很简单，主要是用 css3 的过渡 transition。动画分为两步：
元素翻转 180 度
在翻转到 90 度的 时候，更换背景图片的 url。
这里面需要注意的是，翻转动画的过渡时间曲线应该用 “linear”，这样才能保证这个动画是均匀进行的，就能够控制好翻转 90 度的时机。
把transition写在.flipBtn:hover{}里面 在.flipBtn{}加上transition：none;
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你是想hover的时候有反转的效果，而移开时直接变换没有反转？那你把transition这个属性放在hover里就行了
效果预览：http://codepen.io/zengkan0703...
这是我实现的代码，不知道是不是你想要的效果：
实现原理其实很简单，主要是用 css3 的过渡 transition。动画分为两步：
元素翻转 180 度
在翻转到 90 度的 时候，更换背景图片的 url。
这里面需要注意的是，翻转动画的过渡时间曲线应该用 “linear”，这样才能保证这个动画是均匀进行的，就能够控制好翻转 90 度的时机。
把transition写在.flipBtn:hover{}里面 在.flipBtn{}加上transition：none;