基础知识

再开始制作之前我们需要了解一些CSS知识

transform

用来实现元素的平移、旋转、倾斜和缩放

translate：平移，可以在水平方向和垂直方向上移动元素。

translate(100px, 50px)将元素向右移动100像素，向下移动50像素。 2. rotate：旋转，可以将元素按指定角度旋转。

rotate(45deg)将元素顺时针旋转45度。

skew：倾斜，可以将元素按指定角度倾斜。

skew(30deg, 10deg)将元素水平方向倾斜30度，垂直方向倾斜10度。

skewX(10deg) 延Y方向倾斜

scale：缩放，可以按指定比例缩放元素的大小。

scale(5)将元素放大5倍。

贺卡效果展示：

打开之后：

HTML代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div class="book p3d">
        <!-- 先右后左 -->
        <div class="book-cover p3d">
            <div class="page back flip"></div>
            <div class="page front p3d">
                <div class="shadow"></div>
                <div class="pic"></div>
            </div>
        </div>

        <div class="front-cover p3d">
            <div class="page front flip p3d">
                <p>
                    妈咪请你放心，我过得很好!今天的泡面非常好吃，
                    今天的泡面和前二十天的价格是一样的值得高兴的是今天的份量要多一些，
                    瓦达西只差一点就可以吃饱了。本来我是想要加一根火腿肠的，
                    但是我知道我只是个普通人家的孩子，这样做过于奢侈。
                    哦，对了!最值得高兴的是，今天的蔬菜包里有两粒牛肉粒，
                    而且它的口感就像真的肉一样!还有泡面汤也很好喝!
                    我都舍不得喝完，于是我在里面又加了白开水，
                    这样就可以分给室友们了!
                    但是她们可能觉得这份礼物过于贵重所以婉拒了我。
                    于是我打算把剩下的汤留作晚餐。
                    等我凑够了钱一定带回去给你尝尝，勿念。
                </p>
            </div>

            <div class="page back"></div>
        </div>
    </div>

    <script>
        //鼠标摁住事件
        //鼠标移动事件
        var hold = false
        var page = document.querySelector('.front-cover')
        var pic = document.querySelector('.pic');
        var shadow = document.querySelector('.shadow')

        var clamp = function (val, min, max) {
            return Math.max(min, Math.min(val, max))//找中间值
        }

        page.onmousedown = function () {
            hold = true
        }
        //摁住为false
        window.onmouseup = function () {
            hold = false
        }
        //鼠标移动事件
        window.onmousemove = function (e) {
            //摁住才能执行
            if (hold == true) {
                var angle = clamp((window.innerWidth / 2 - e.pageX + 300) / 300 * -90, -180, 0)

                page.style.transform = `rotateY(${angle}deg)`

                //pic要立起来 绕X轴旋转 angle/2

                pic.style.transform = `rotateX(${angle / 2}deg)`

                //shadow要倾斜 angle/8
                shadow.style.transform = `skewX(${angle / 8}deg)`

            }
        }
    </script>
</body>

</html>

CSS代码：

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    height: 100%;
    font: 90%/1.25 Helvetica, arial, helvetica;
    color: rgb(28, 172, 152);
    perspective: 1000px;
    background: linear-gradient(to bottom, rgb(255, 189, 200), rgb(225, 69, 95));
}

.book {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -150px;
    cursor: pointer;
    user-select: none;
    transform: rotateX(55deg);
}

.page {
    width: 300px;
    height: 300px;
    padding: 1em;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 2em;
}

.front {
    background-color: #cad5f3;

}

.back {
    background-color: #fff;

}

.front-cover {
    transform-origin: 0 50%;
    transform: rotateY(0deg);

}

.p3d {
    transform-style: preserve-3d;
}

.front-cover .back {
    background-image: url(https://n.sinaimg.cn/sinakd20112/600/w1920h1080/20220510/c74b-bc4963bedeb3a0e741c23777bcb37dec.jpg);
    background-size: 100% 100%;
    transform: translateZ(3px);
}

.flip {
    transform: rotateY(180deg);
}

.shadow,
.pic {
    width: 196px;
    height: 132px;
    position: absolute;
    left: 60px;
    top: 60px;
    transform-origin: 0 100%;
}

.pic {
    background: url(https://n.sinaimg.cn/sinakd20122/650/w1440h810/20220514/e121-1761df8076f188e6239eeedc2378b482.jpg);
    background-size: 100% 100%;
}


.shadow {
    background-color: rgba(152, 134, 15, 0.5);
}

以上就是本篇的文章的全部内容，感谢阅读~

如何制作电子贺卡

基础知识

transform