简单CSS绘制３D贺卡

如何利用CSS绘制一些简单却又炫酷的３D效果呢？
首先上图

这是一张单纯用CSS实现的３D贺卡，下面一起来看一下事如何实现的：

１．ｈｔｍｌ代码

Niu

嗯~ o(￣▽￣)o，就这？？？

２．ＣＳＳ代码

ａ．清除默认样式，以及设置ｂｏｄｙ全屏背景颜色

    * {
        padding: 0;
        margin: 0;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2c3e50;
        height: 100vh;
        height: 100vw;
    }

ｎｉｕ为啥在这个奇怪的位置呢？好吧，这个不是关键．．．

ｂ．ｃａｒｄ标签设置基本样式

    .card {
        width: 150px;
        height: 200px;
        background-color: #ecf0f1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #000;
        font-size: 20px;
        position: relative;
    }

为啥要设置position: relative呢，好问题，待会再说！

ｃ．伪元素上场了

    .card::before,
    .card::after {
        position: absolute;
        background-image: linear-gradient(to right, #e74c3c, #f39c12);
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        top: 0;
        box-sizing: border-box;
    }
    .card::before {
        content: '生日';
        left: 0;
        justify-content: flex-end;
        padding-right: 10px;
    }

    .card::after {
        content: '快乐';
        right: 0;
        justify-content: flex-start;
        padding-left: 10px;
    }

为啥要用为元素啊？因为香啊！伪元素就可以当作一个ｄｉｖ节点来看待，而且还不用再写两个ｄｉｖ元素，你说香不香．．．注意，我们为伪元素添加了position: absolute属性，因此父元素要用相对定位。~~~~

４．关键点来了

就这虽然还能看，单总感觉差了点意思，咱再来优化一下

  
     .card::before {
        content: '生日';
        left: 0;
        justify-content: flex-end;
        padding-right: 10px;
        ／／　关键点在这里
        transform-origin: left;
        transform: rotateY(-10deg);
    }

    .card::after {
        content: '快乐';
        right: 0;
        justify-content: flex-start;
        padding-left: 10px;
        ／／　关键点在这里
        transform: rotateY(10deg);
        transform-origin: right;
    }

请注意这里为每一个伪类添加了一个ｔｒａｎｓｆｏｒｍ属性和transform-origin属性。前者使其旋转，而后者则是指明旋转的参考线。这样我们就能通过调整旋转的角度，实现两页的展开角度。
效果图如下：

５．最后一步３Ｄ透视

做了这么对，依旧是平面展示，３D呢，这就来了，仅需两行代码

    .card {
        width: 150px;
        height: 200px;
        background-color: #ecf0f1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #000;
        font-size: 20px;
        position: relative;
        /* 3D展示 */
        transform-style: preserve-3d;
        transform: perspective(900px) rotateX(20deg) rotateY(-20deg);
    }

为了方便查看３D效果，我给ｃａｒｄ元素添加了一个３D透视，并且旋转一定角度，这样看起来就自带美感了。

好了，再见！