扫码关注官方订阅号
想要实现背景图片鼠标移入左右翻变换背景图的动效，但是移出的时候想要去除掉翻转，直接把背景图片换回来，捣鼓了许多都不知道这么弄，就大神临摹求解。。。
3D
光阴似箭催人老，日月如移越少年。
你是想hover的时候有反转的效果，而移开时直接变换没有反转？那你把transition这个属性放在hover里就行了
效果预览：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 度的时机。
把transition写在.flipBtn:hover{}里面 在.flipBtn{}加上transition：none;
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
3
1345
收藏
你是想hover的时候有反转的效果，而移开时直接变换没有反转？那你把transition这个属性放在hover里就行了
效果预览：http://codepen.io/zengkan0703...
这是我实现的代码，不知道是不是你想要的效果：
实现原理其实很简单，主要是用 css3 的过渡 transition。动画分为两步：
元素翻转 180 度
在翻转到 90 度的 时候，更换背景图片的 url。
这里面需要注意的是，翻转动画的过渡时间曲线应该用 “linear”，这样才能保证这个动画是均匀进行的，就能够控制好翻转 90 度的时机。
把transition写在.flipBtn:hover{}里面 在.flipBtn{}加上transition：none;