前言

要制定一个电子请柬，就需要编写一段代码来实现一个基本的网页交互效果，其中用户可以通过按住鼠标并移动来改变页面中某些元素的角度和位置。

实现效果

分析

当用户按住鼠标并且按住(不放)移动时，pic元素会绕着X轴旋转，page元素会绕着Y轴旋转，shadow元素会沿着X轴倾斜，从而给用户实现一种立体翻页请柬的效果。

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>
          亲爱的丁社长和铁锤：

          恭喜你们迎来人生新的旅程，结婚是爱情的圆满，是幸福的开始。愿你们携手共度人生的每一刻，相互扶持，相互理解，相互包容。

          在这个特别的日子里，愿你们的爱情如同新婚的阳光一样灿烂，如同甜蜜的蜜蜂一样温暖。愿你们的爱情，如同永恒的星辰，照耀着彼此的人生。

          愿你们的婚姻充满欢笑与快乐，百年好合，幸福美满！

          祝福语：
          丁社长和铁锤，祝你们于2024年5月1日结婚纪念日快乐！

          祝福你们永结同心，白头偕老！
        </p>
      </div>

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

  </div>
</body>
</html>

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, rgb(58, 24, 6), #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(0);
  }
  .p3d{
    transform-style: preserve-3d;
  }
  .front-cover .back{
    background-image: url(https://img2.baidu.com/it/u=2368431681,4265369131&fm=253&fmt=auto&app=138&f=JPEG?w=595&h=500);
    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);
  }

js代码

先定义一个变量hold,给其赋值为false,其作用是用于记录用户是否正在按住鼠标。
使用document.querySelector()方法选中相应类名。
var clamp = function(val,min,max){ return Math.max(min,Math.min(val,max)) }这个函数用来限制一个值在给定的最大最小值之间。
定义一个函数，当用户在page元素上按下鼠标时，将hold的值转为true。
window.onmouseup = function(){ hold = false }用于当用户在窗口内任何地方释放鼠标时，将hold的值设为false。
window.onmousemove = function(e){}用于当用户的鼠标在窗口内移动时，该函数会被调用。首先判断hold的值是否为true,即判断用户是否正在按住鼠标，如果是，则计算鼠标的当前位置相对于页面中心的偏移量，并且根据该偏移量计算出旋转角度angle,通过clamp函数确保angle不会超出-180°到0°的范围；再更新page、pic和shadow元素的属性transform,让其跟着角度进行旋转或者倾斜。

<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
    }
    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 = `skew X(${angle / 8}deg)`

        }
    }
  </script>

结语

快来定制一个属于自己的请柬吧。

个人电子请柬

前言

实现效果

html代码

css代码

js代码

结语