<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>H5 3D翻转卡片动画</title> <link rel="stylesheet" href="base.css" /> <style type="text/css"> .flip{transform:translate3d(0,0,0); margin: 40px;} .flip-box{ position: relative; width: 110px; height: 140px; overflow: hidden; } .flip-item{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition:all .5s ease-in-out; transform-style:preserve-3d; backface-visibility:hidden; border: 1px solid #ddd; box-sizing: border-box; } .flip-item img{ width: 70px; height: 70px; border-radius: 100%; margin: 32px auto; display: block; } .flip-item-text{ position: absolute; bottom: 8px; left: 0; width: 100%; text-align: center; color: #333; } .flip-item-front{ transform:rotateY(0deg); z-index: 2; background: #fff; } .flip-item-back{ transform:rotateY(180deg); z-index: 1; background: #009fff; } .flip-item-back .flip-item-text{ color: #fff; } .flip-box:hover .flip-item-front{ z-index: 1; transform: rotateY(180deg); } .flip-box:hover .flip-item-back{ z-index: 2; transform: rotateY(0deg); } .flip-item-bling{ position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; background: url(animation.png) center no-repeat; z-index: -1; } .flip-box:hover .flip-item-bling{ transform: translate3d(0,0,0); animation: rotate infinite 10s linear; } @keyframes rotate{ 0% { transform-origin: center; transform: rotate3d(0,0,1,0deg); } 100%{ transform-origin: center; transform: rotate3d(0,0,1,360deg); } } </style> </head> <body> <div class="flip"> <div class="flip-box"> <a href="###" class="flip-item flip-item-front"> <img src="bbb.jpg" alt=""> <span class="flip-item-text">一站式共享网络</span> </a> <a href="###" class="flip-item flip-item-back"> <div class="flip-item-bling"></div> <img src="aaa.jpg" alt=""> <span class="flip-item-text">onestopweb</span> </a> </div> </div> </body> </html>
效果图:
相关推荐
CSS3提供了很多属性可以实现3D效果,之前我们也分享过一些基于CSS3和HTML5的卡片动画,例如这个纯CSS3实现可感知方向的卡片翻转动画和CSS3实现答题卡片抽取切换动画。这次我们给大家带来另一款基于CSS3的卡片层叠...
纯CSS3精美3D卡片翻转动画特效.zip
CSS3悬停卡片3D翻转动画特效是一款卡片和文字翻转切换效果。
纯CSS3实现可感知方向的卡片翻转动画 纯CSS3实现可感知方向的卡片翻转动画
CSS3悬停卡片3D翻转动画特效源码.zip
一款效果非常棒的CSS3鼠标悬停卡片3D翻转切换特效,可以用来做图片与文字翻转动画效果。
html5 css3仿谷歌卡片翻转动画特效
CSS3方向感知卡片翻转动画特效是一款带有方向感知的鼠标悬停卡片翻转动画特效。
之前我们分享过很多关于CSS3实现的卡片动画,比如这个纯CSS3实现可感知方向的卡片翻转动画就非常不错。这次给大家介绍的是一个基于CSS3和SVG的卡片内容翻转切换动画,卡片中的内容可以是任意的HTML代码,例如图片和...
使用CSS3 制作的 方向感知卡片翻转动画特效。。。。。
纯CSS3实现带3D卡片翻转效果的天气预报动画特效源码.zip
CSS3悬停卡片3D翻转动画特效是一款卡片和文字翻转切换效果。
css3产品展示卡片布局翻转特效,一款样式精美的云服务器介绍展示布局效果,鼠标悬停卡片翻转查看更多信息。
很简洁漂亮的一款CSS3方向感知鼠标悬停卡片翻转动画特效,感知鼠标进入卡片的方向出现不同角度的翻转动画效果。
这是一款简单又创意个性的CSS3 SVG图文卡片内容翻转切换特效,左右箭头按钮控制切换。
CSS3方向感知卡片翻转动画特效是一款带有方向感知的鼠标悬停卡片翻转动画特效。