前言

要想实现贺卡的旋转和翻页，具有立体的美观，先介绍一下transform

在前端开发中，"transform" 通常指的是一种CSS属性，用于对元素进行变换，包括旋转、缩放、移动和倾斜等。这个属性通常用于创建动画效果、布局设计和用户交互。主要的 transform 属性值包括：

位移（Translation） ：通过 translate() 函数可以移动元素在水平和垂直方向上的位置。
旋转（Rotation） ：通过 rotate() 函数可以使元素围绕其原点进行旋转。
缩放（Scale） ：通过 scale() 函数可以对元素进行放大或缩小。
倾斜（Skew） ：通过 skew() 函数可以对元素进行水平和垂直方向上的倾斜。
变形原点（Transform Origin） ：可以通过设置 transform-origin 属性来定义变换的原点，默认是元素的中心点。
多个变换组合（Multiple Transformations） ：可以同时对一个元素应用多个变换，只需将它们以空格分隔即可，例如 transform: translate(50px, 50px) rotate(45deg);。

CSS 的 transform 属性提供了强大的功能，使得开发者可以通过简单的 CSS 来创建复杂的动画和交互效果，而无需依赖JavaScript。这使得前端开发更加灵活和高效。

用Transform实现一个动态效果

通过这些关键帧的定义，动画会在上述指定的时间点和大小之间进行平滑的过渡，从而创建出一个连续的缩放效果。

HTML

<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">
                
            </div>

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

    </div>

这段代码描述了一个具有立体效果的书籍页面布局，同时包含了一些文本内容。

<div class="book p3d">：书籍的外层容器，类名为 book，可能表示这是整本书的容器。p3d 类被应用于这个容器，可能表示这个容器具有 3D 视觉效果。
<div class="book-cover p3d">：书籍的封面容器，类名为 book-cover。内部包含两个页面元素：一个背面页面和一个正面页面。同样，p3d 类被应用于这个容器，表示它也具有 3D 视觉效果。
<div class="page back flip"></div>：书籍封面的背面页面。类名为 page 和 back，表示这是一个页面元素，并且是书籍封面的背面。flip 类可能表示这个页面可以进行翻转动画。
<div class="page front p3d">：书籍封面的正面页面容器。类名为 page 和 front，表示这是一个页面元素，并且是书籍封面的正面。p3d 类被应用于这个容器，表示它具有 3D 视觉效果。内部包含一个阴影元素和一个图片元素。
<div class="shadow"></div>：书籍封面的正面页面的阴影元素。
<div class="pic"></div>：书籍封面的正面页面的图片元素。
<div class="front-cover p3d">：书籍的前封面容器，类名为 front-cover。内部包含了两个页面元素：一个正面页面和一个背面页面。同样，p3d 类被应用于这个容器，表示它也具有 3D 视觉效果。
<div class="page front flip p3d">：书籍前封面的正面页面。类名为 page、front 和 flip，表示这是一个页面元素，是书籍前封面的正面，并且可以进行翻转动画。p3d 类被应用于这个容器，表示它具有 3D 视觉效果。内部包含了一段文本内容。
<div class="page back"></div>：书籍前封面的背面页面。类名为 page 和 back，表示这是一个页面元素，是书籍前封面的背面。

CSS

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

html {
    height: 100%;
}

body {
    height: 100%;
    font: 100%/1.25 Helvetica, arial, helvetica;
    color: #fff;
    perspective: 1000px;
    background: linear-gradient(to bottom, #444, #999);
}

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

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

.front {
    background-color: #d93e2b;
}

.back {
    background-color: #fff;
}

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

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

.front-cover .back {
    background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2023%2F12%2F2809%2F277492071_3_20231228091018727.jpeg&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716274649&t=e0589c910a5e7285a6b0c2cdaf74a3c8);
    background-size: cover;
    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://q4.itc.cn/q_70/images03/20240405/39ec09deda3a41d79e03897b0fdf68a0.jpeg);
    background-size: cover;
}

.shadow {
    background-color: rgba(0, 0, 0, 0.5);
}

代码实现了一个具有立体效果的书籍页面布局，包括了书籍的封面和内容页，并在页面中嵌入了一些图片和文本。

让我解释一下这段代码的关键部分：

* { ... }：这是一个通用的 CSS 样式重置，将页面中所有元素的边距、内边距和边框都设置为 0，并且使用 box-sizing: border-box; 将盒模型设置为边框盒模型。
.book 类：定义了书籍容器的样式，包括尺寸、位置和旋转角度。
.page 类：定义了页面元素的样式，包括尺寸、位置和文本缩进。
.front 和 .back 类：定义了书籍页面的正面和背面的背景颜色。
.front-cover 类：定义了书籍封面的样式，包括旋转角度和变换原点。
.p3d 类：定义了元素的 3D 视觉效果。
.front-cover .back 类：定义了书籍封面背面的背景图片，并设置了背景大小和 Z 轴方向的位移。
.flip 类：定义了页面元素翻转时的旋转角度。
.shadow 和 .pic 类：定义了阴影和图片元素的样式，包括尺寸、位置和背景图片。

JS

<script>
        // 鼠标摁住事件
            // 鼠标移动事件
            var hold = false
            var page = document.querySelector('.front-cover')
            var clamp = function (val, min, max) {
                return Math.max(min, Math.min(val, max))
            }
            var pic = document.querySelector('.pic')
            var shadow = document.querySelector('.shadow')



            page.onmousedown = function () {
                hold = true
            }
            window.onmouseup = function () {
                hold = false
            }

            window.onmousemove = function (e) {  // 摁住才能执行
                if (hold == true) {
                    console.log(e.pageX);
                    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 要倾斜x  angle / 8
                    Shadow.style.transform = `skewX(${angle / 8}deg)`


                }
            }


    </script>

这段 JavaScript 代码实现了一个效果，当用户按住鼠标在页面上移动时，会根据鼠标的水平位置改变页面元素的旋转角度，从而产生立体和翻转的效果。

让我解释一下代码的关键部分：

page.onmousedown：当用户按下鼠标按钮时，将 hold 变量设置为 true，表示鼠标处于按住状态。
window.onmouseup：当用户释放鼠标按钮时，将 hold 变量设置为 false，表示鼠标不再处于按住状态。
window.onmousemove：当用户在页面上移动鼠标时，根据鼠标的水平位置计算旋转角度，并将这个角度应用到页面元素上。
clamp 函数：用于限制旋转角度的取值范围在 -180 到 0 之间，确保页面元素不会旋转过度。
page.style.transform：将计算得到的旋转角度应用到 .front-cover 元素上，使其围绕 Y 轴旋转，产生翻转效果。
pic.style.transform：根据旋转角度使 .pic 元素绕 X 轴旋转，从而产生立起来的效果。
Shadow.style.transform：根据旋转角度使 .shadow 元素倾斜，产生投影效果。注意这里应该是 shadow 而不是 Shadow，因为 CSS 类名应该保持一致。

到此，你的贺卡就发行成功了！可以自行运行看看效果，送给你的三五好友吧。

你的贺卡到了！

前言

用Transform实现一个动态效果

HTML

CSS

JS