css代码实现3D动画翻转 - 鱿鱼游戏卡片制作

先看效果：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D动画翻转</title><style>*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins',sans-serif;}body{height: 100vh;display: flex;align-items: center;justify-content: center;background: #EED891;}.wrapper{position: relative;height: 330px;width: 620px;perspective: 1000px;    }.wrapper .flip-card{position: relative;height: 100%;width: 100%;background: #D48600;transform-style: preserve-3d;transition: all 1s ease-in-out;}.wrapper:hover .flip-card{transform: rotateY(180deg);}.flip-card .card{display: flex;align-items: center;justify-content: center;height: 100%;width: 100%;background: #D48600;border-top: 2px solid #cc6600;border-left: 2px solid #cc6600;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);backface-visibility: hidden;position: absolute;}.card span.circle,.card span.square{height: 110px;width: 110px;border: 10px solid #4d2600;}.card span.circle{border-radius: 50%;}.card span.triangle{position: relative;height: 0;width: 0;border-right: 60px solid transparent;border-left: 60px solid transparent;border-bottom: 110px solid #4d2600;margin-right: 16px;}.card span.triangle::before{content: '';position: absolute;height: 0;width: 0;left: -40px;top: 20px;border-right: 40px solid transparent;border-left: 40px solid transparent;border-bottom: 80px solid #D48600;}.back.card{transform: rotateY(180deg);}.back.card .home-logo{position: relative;height: 65px;width: 65px;border: 5px solid #4d2600;border-radius: 50%;margin-right: 16px;}.home-logo .icon{position: relative;top: 50%;left: 50%;transform: translate(-50%,-50%) translateY(6px);display: inline-block;height: 15px;width: 25px;background: #4d2600;}.home-logo .icon::before{content: '';position: absolute;top: -15px;height: 25px;width: 25px;background: #4d2600;transform: rotate(45deg);} .back.card .num{font-size: 25px;font-weight: 600;color: #4d2600;}</style>
</head>
<body><div class="wrapper"><div class="flip-card"><div class="front card"><span class="circle"></span><span class="triangle"></span><span class="square"></span></div><div class="back card"><span class="home-logo"><span class="icon"></span></span><span class="num">8650 4006</span></div></div></div>
</body>
</html>

其他小案例：

css实现颜色渐变小动画

css代码实现3D动画翻转 - 鱿鱼游戏卡片制作

css实现加载旋转动画

css实现旋转的小流星动画

只用js代码实现电子时钟，精确到毫秒

简单的js代码实现主题色切换

点击主页看更多css小动画，js小案例…

我的主页

css代码实现3D动画翻转 - 鱿鱼游戏卡片制作相关推荐

css代码写3D盒子动画
完整代码见下: html: <!DOCTYPE html> <html lang="zh-CN"><head><meta charset= ...
用HTML5+CSS实现3d动画立方体
本文章描述如何用HTML5与CSS做出一个3d动画的立方体. 文章目录一,主要思路与注意事项二,布局与逻辑分析三,效果展示四,完整代码一,主要思路与注意事项: 1.制作一个立方体,需要六个面 ...
迪文DGUS智能屏如何轻松实现3D动画
三维立体的视觉效果已经被广泛应用于人机交互中,三维图形逼真的显示效果往往可以更加直接的传递出视觉信息,减少用户的信息解读门槛. 传统的三维立体静态.动态画面的显示往往对于 GPU 的图像处理性能.显示 ...
html5 css 3d动画效果代码,css3D+动画的例子（附完整代码）
本篇文章给大家带来的内容是关于css3D+动画的例子(附完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言最近玩了玩用css来构建3D效果,写了几个demo,所以博客总 ...
css3制作动画色子,css3实现3D色子翻转特效
css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: 复制代码代码如下: ...
js操作设置css动画,使用 CSS3 和 JavaScript 制作链接反转 3D 动画 - 文章教程
使用 CSS3 和 JavaScript 制作链接反转 3D 动画,CSS 和 JavaScript 技巧用来创建顶层的悬浮效果,使用 transfomr-origin 和 transform-sty ...
【CSS】770- 多层嵌套的CSS 3D动画技术详解
CSS动画是当前一种非常火爆的技术,我说的并不是一些简单的颜色变换或长短属性变换,我说的是3D变换技术:纯CSS实现的翻滚旋转立方体就是最典型的例子.网上能找到很多关于CSS动画的代码,但对于一个程序 ...
多层嵌套的CSS 3D动画技术详解
CSS动画是当前一种非常火爆的技术,我说的并不是一些简单的颜色变换或长短属性变换,我说的是3D变换技术:纯CSS实现的翻滚旋转立方体就是最典型的例子.网上能找到很多关于CSS动画的代码,但对于一个程序 ...
纯CSS实现beautiful的3D动画
大家好,我是"前端点线面",一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图("百题斩"获取<前端百题斩>pdf版:分别回复"g ...
CSS3实现3D魔方翻转网页动画特效
CSS3实现3D魔方翻转网页动画特效 <link rel="stylesheet" type="text/css" href="square.c ...

css代码实现3D动画翻转 - 鱿鱼游戏卡片制作

css代码实现3D动画翻转 - 鱿鱼游戏卡片制作相关推荐

最新文章

热门文章