css3 卡片hover3D效果

鼠标hover卡片向上翻转，看简易代码

<!DOCTYPE html>
<html>
<head><title>3D Flip Card hover effects</title><style type="text/css">* {margin: 0;padding: 0;font-family: consolas;box-sizing: border-box;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #1e1e1e;}.container {width: 1000px;position: relative;display: flex;justify-content: space-between;}.container .card {position: relative;width: 300px;height: 200px;}.container .card .face {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: 0.5s;}.container .card .face.face1 {background:#333;display: flex;justify-content: center;align-items: center;z-index: 1;transform-origin: bottom;}.container .card .face.face1 img {max-width: 100px;}.container .card .face.face1 h3 {margin: 10px 0 0;color: white;text-align: center;font-size: 1.5em;}.container .card:hover .face.face1 {transform: translateY(-100%) rotateX(90deg);background: #ff0057;}.container .card .face.face2 {background-color: #fff;display: flex;justify-content: center;align-items: center;padding: 20px;transform-origin: top;transform: translateY(100%) rotateX(90deg);}.container .card:hover .face.face2 {transform: translateY(0%) rotateX(0deg);}</style>
</head>
<body><div class="container"><div class="card"><div class="face face1"><div class="content"><img src="design.png"><h3>Design</h3></div></div><div class="face face2"><div class="content"><p>预览</p><p>下载</p></div></div></div><div class="card"><div class="face face1"><div class="content"><img src="Code.png"><h3>Code</h3></div></div><div class="face face2"><div class="content"><p>预览</p><p>下载</p></div></div></div><div class="card"><div class="face face1"><div class="content"><img src="lanuch.png"><h3>Lanuch</h3></div></div><div class="face face2"><div class="content"><p>预览</p><p>下载</p></div></div></div></div>
</body>
</html>

css3 卡片hover3D效果相关推荐

css3 抽奖实现炸弹爆炸效果卡片翻转效果雪花效果
一.业务背景: 最近接了一个"扎水球"的小程序项目,用户使用"金针"扎破水球,可以扎到奖励,或者扎到炸弹,其实也可以看作是一次抽奖,扎破水球后,显示对应的奖励. ...
推荐12个绚丽的CSS3图片悬停效果
CSS3为我们开发提供了很多特效,如鼠标悬停,线性渐变,在web开发早期常用的是鼠标悬停,他是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,后来慢慢演变成现在的是图片悬停效果,现在我 ...
CSS实现卡片浮动效果
效果演示实现原理给卡片添加 css3 新的过度属性(transition),鼠标移入和移出时都会触发这个过度属性,使卡片向上偏移一段距离,同时扩大卡片的背景阴影,从而实现卡片的浮动效果. 关键代码 ...
html桌面卡牌效果,html+css实现响应式卡片悬停效果
话不多,看效果先: 卡片悬停,响应式卡片,简约效果. 实现: 1. 定义标签,.kapian为最底层盒子,然后两个子盒子一个放图片,一个放文本: The aurora borealis natural ...
android 卡片旋转动画,Android 卡片翻转效果
Android 卡片翻转效果使用的Cramre来完成记录一下: 一个好用的3D旋转工具类 oid.graphics.Matrix; import android.util.Log; import a ...
boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...
[css] 请说说CSS3实现文本效果的属性有哪些？
[css] 请说说CSS3实现文本效果的属性有哪些? text-shadow:文字阴影效果 word-wrap:换行设置个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
Android仿探探卡片拖拽,Vue 仿探探拖拽卡片的效果
原标题:Vue 仿探探拖拽卡片的效果已更新Vue3版,请给前端大全发送关键字vue3仿探探获取Vue3版类似 Tinder 和探探的卡片效果的组件,社区中已经非常多了.我这一版除了可以实现和他 ...
CSS3图片跳动效果
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>CSS ...

css3 卡片hover3D效果

css3 卡片hover3D效果相关推荐

最新文章

热门文章