简单CSS绘制3D贺卡

如何利用CSS绘制一些简单却又炫酷的3D效果呢?
首先上图
简单CSS绘制3D贺卡_第1张图片
这是一张单纯用CSS实现的3D贺卡,下面一起来看一下事如何实现的:

1.html代码

Niu


嗯~ 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;
    }

简单CSS绘制3D贺卡_第2张图片
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;
    }

简单CSS绘制3D贺卡_第3张图片
为啥要设置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;
    }

简单CSS绘制3D贺卡_第4张图片

为啥要用为元素啊?因为香啊!伪元素就可以当作一个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属性。前者使其旋转,而后者则是指明旋转的参考线。这样我们就能通过调整旋转的角度,实现两页的展开角度。
效果图如下:
简单CSS绘制3D贺卡_第5张图片

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透视,并且旋转一定角度,这样看起来就自带美感了。
简单CSS绘制3D贺卡_第6张图片

好了,再见!

你可能感兴趣的:(csscss3sass)