HTML5+CSS3实现3D旋转卡片,开发工具:VS Code。
先看效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-82YkNLBC-1653803901135)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c53c2c237c74057a4190617668f404a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]
源代码:
<div class="card">
<div class="front">
<p>缘分让我们遇到!</p>
</div>
<div class="back">
<p>求点赞~</p>
<p>求关注~</p>
<p>求评论~</p>
<p>求收藏~</p>
</div>
</div>
*{
margin:0;
padding:0;
}
body{
/* 弹性布局,让页面元素水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 设置body高度为100%窗口高度 */
height:100vh;
/* 背景渐变色 */
background-image: linear-gradient(200deg,#5ee7df,#b490ca);
/* 大家看到不同了吗?不过看起来有些许夸张 */