乐趣区

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

如何利用 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 透视,并且旋转肯定角度,这样看起来就自带美感了。

好了,再见!

退出移动版