效果图
一些小知识点
transform属性的类别：
- translate 平移
- rotate 旋转
- skew 倾斜
- scale 缩放
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>open-book</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>Dear Pip,
I hope this message finds you in the best of spirits! As you embark on each new day, may the sun warm your face and the breeze carry away any worries that linger in your heart.
I wish for you to find joy in the little things, to cherish every smile that graces your lips, and to embrace each moment with a heart full of gratitude. May your days be filled with laughter, love, and endless possibilities.
With love and warmest wishes!
Yours lenora</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;
}
page.onmouseup=function(){
hold=false;
}
window.onmousemove=function(e){//摁住才能执行
if(hold){
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;
bottom: 0;
box-sizing: border-box;
}
html{
height: 100%;
}
body{
height: 100%;
font: 100%/1.25 微软雅黑;
color: #f1ebeb;
perspective: 1000px;
background:linear-gradient(to bottom,#315e5e,#decba4);
}
.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: #54b6c5;
}
.back{
background-color: #c3cfd4;
}
.front-cover{
transform-origin: 0 50%;
/* transform: rotateY(-120deg); */
}
.p3d{
transform-style: preserve-3d;
}
.front-cover .back{
background-image: url(https://image.meiye.art/pic_1628409268885?imageMogr2/thumbnail/560x/interlace/1);
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);
}
