<!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悬停卡片3D翻转动画特效】是一种利用CSS3技术实现的交互式设计，常见于网页界面中，可以提升用户体验。这种特效在用户鼠标悬停在卡片上时，卡片会进行3D翻转，展示卡片另一面的内容，通常用于信息的展示和切换...
在CSS3中，3D翻转动画效果是利用先进的CSS3转换（transform）和过渡（transition）属性来创建的一种动态视觉效果。这种效果可以应用于网页元素，如卡片、按钮、图片等，为用户界面增添立体感和交互性。在本案例中，...
【HTML5与CSS3实现卡片翻转动画】 在HTML5中，我们可以使用`<div>`或其他容器元素来创建卡片结构，通过设置合适的宽高、边距和背景等属性来定义卡片的基本样式。同时，HTML5还引入了新的标签，如`<article>`和`...
3. **CSS翻转效果**：为`.card`添加一个过渡效果，指定翻转时的属性（这里是`transform`）和时间，然后为`.back`设置一个初始的翻转角度，如`rotateY(180deg)`，使其默认位于背面。 ```css .card { transition: ...
标题中的“CSS3悬停卡片3D翻转动画特效源码”指的是一个使用CSS3技术实现的交互式设计，这种设计通常应用于网站或应用程序中，为用户提供一种视觉上的反馈，当用户将鼠标悬停在卡片元素上时，卡片会进行三维空间的...
本教程将深入探讨如何使用jQuery、HTML5和CSS3技术来实现一个独特的圆形卡片3D翻转效果。这个效果可以让用户通过鼠标悬停或者点击触发卡片的翻转，从而展示卡片的另一面，这在展示产品信息或者个人简介等场景中非常...
CSS3 实现鼠标移入 3D 卡片翻转 3D 卡片翻转效果是一种流行的网页视觉效果，常用于增强用户界面的互动性和视觉吸引力。通过 CSS3 的强大功能，我们可以轻松实现这种效果，而无需依赖复杂的 JavaScript 代码。 关键...
综上所述，这个项目展示了CSS3的强大能力，尤其是3D变换和动画特性，结合JavaScript实现了交互式的、方向感知的卡片翻转效果。通过理解和应用这些技术，开发者可以为网页增添更多生动和吸引人的用户体验。
在本文中，我们将深入探讨如何使用CSS3和JavaScript创建炫酷的3D拖拽卡片动画特效。这种技术常用于现代Web应用和网站中，为用户提供交互性和视觉吸引力，提升用户体验。 首先，我们要理解CSS3中的关键特性：转换...
之前我们分享过很多关于CSS3实现的卡片动画，比如这个纯CSS3实现可感知方向的卡片翻转动画就非常不错。这次给大家介绍的是一个基于CSS3和SVG的卡片内容翻转切换动画，卡片中的内容可以是任意的HTML代码，例如图片和...
标题中的“纯CSS3实现带3D卡片翻转效果的天气预报动画特效源码”指的是一个使用纯CSS3技术创建的、具有3D翻转效果的天气预报展示动画。这个项目可能是一个网页小部件，允许用户查看不同城市的天气预报信息，并通过3D...
【CSS3 3D银行卡片层叠特效】是一种利用现代浏览器对CSS3特性的支持，创建出具有立体感和交互性的网页元素展示效果。在这款特效中，卡片以3D方式堆叠，当用户将鼠标悬停在某一张卡片上时，该卡片会滑动到前端，呈现...
这个“纯css3实现的3D方块翻转动画特效源码.zip”压缩包包含了实现3D方块翻转动画的CSS3代码示例，非常适合前端开发者学习和参考。 首先，3D转换是CSS3引入的一项重要特性，它允许元素在3D空间内移动、旋转和缩放。...
使用CSS3 制作的 方向感知卡片翻转动画特效。。。。。