HTML5+CSS3小实例：3D旋转卡片

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);
    /* 大家看到不同了吗？不过看起来有些许夸张 */