乐趣区

关于css:简单CSS绘制３D贺卡

jiezi

如何利用 CSS 绘制一些简略却又炫酷的3D 成果呢？
首先上图

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

1．html代码

<body>

<div class="card">
    Niu
</div>

</body>
嗯~ o(~▽~)o，就这？？？

2．CSS代码

a．革除默认款式，以及设置body全屏背景色彩

    * {
        padding: 0;
        margin: 0;
    }

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


niu为啥在这个奇怪的地位呢？好吧，这个不是要害．．．

b．card标签设置根本款式

    .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 呢，好问题，待会再说！

c．伪元素上场了

    .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;
    }

为啥要用为元素啊？因为香啊！伪元素就能够当作一个div节点来对待，而且还不必再写两个div元素，你说香不香．．．留神，咱们为伪元素增加了 position: absolute 属性，因而父元素要用绝对定位。~~~~

4．关键点来了

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

  
     .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属性和 transform-origin 属性。前者使其旋转，而后者则是指明旋转的参考线。这样咱们就能通过调整旋转的角度，实现两页的开展角度。
效果图如下：

5．最初一步3D透视

做了这么对，仍旧是立体展现，3D 呢，这就来了，仅需两行代码

    .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);
    }

为了不便查看3D 成果，我给card元素增加了一个3D 透视，并且旋转肯定角度，这样看起来就自带美感了。

好了，再见！

退出移动版