使用CSS3 ，jQuery实现点击翻书动画效果，完整效果可在firefox中查看
HTML
<div class="desktop">
<div class="book">
<div class="page bg end">
<div class="front">谢谢阅读</div>
</div>
<div class="page">
<div class="back">
<p>JavaScript很重要</p>
</div>
<div class="front">JavaScript </div>
</div>
<div class="page">
<div class="back">
<p>CSS3非常强大</p>
</div>
<div class="front">CSS3</div>
</div>
<div class="page">
<div class="back">
<p>HTML5新特性不错哦</p>
</div>
<div class="front">HTML5</div>
</div>
<div class="page bg">
<div class="back">
<p>作者：M先生</p>
<p>个人博客：</p>
<a href="https://home.cnblogs.com/u/mp1994/">https://home.cnblogs.com/u/mp1994/</a>
</div>
<div class="front">前端技术栈</div>
</div>
</div>
</div>
CSS
/* 简单翻书动画开始 */
.desktop{
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.book{
width: 300px;
height: 400px;
position: absolute;
/* 倾斜30度角 */
transform: rotateX(30deg);
transform-style: preserve-3d;
perspective:;
font-size: 30px;
color: #9ACD32;
box-shadow: 0 6px 10px 0 rgba(0,0,0,.6);
}
.page{
width: 100%;
height: 100%;
position: absolute;
background-color: #eee; /* 翻转轴left */
transform-origin: left;
/* backface-visibility: hidden; */
border-left: 2px solid saddlebrown;
box-sizing: border-box;
z-index: ;
}
.bg{
background-color: #1D7DB1;
}
.end{
z-index: -999999;
}
/* 正面 */
.front{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: inherit;
}
/* 背面 */
.back{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: inherit;
color: red;
font-size: 12px;
font-weight: bold;
transform: rotateY(180deg);
}
@keyframes turning {
to{
transform: rotateY(-160deg);
}
}
@keyframes resetBook{
from{
transform: rotateY(-160deg);
}
to{
transform: rotateY(0deg);
}
} /* 简单翻书动画结束 */
JavaScript
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
const $page = $('.page')
let isClick = true
$page.click(function (e){
// 动画执行时禁止再次点击
if (isClick) {
isClick = false
setTimeout( () => {
isClick = true
}, 2000) // 获取当前点击元素下标
const index = $(this).index()
const $childFront = $(this).children('.front')
const $childBack = $(this).children('.back') // 由于背部封面(下标0)是不动的 因此判断下标大于0才增减class
if (index > 0) {
// 判断是否已经翻过 已经翻过则翻回
if ( $(this).hasClass('flag') ) {
// 设置css执行动画效果
$(this).css({
"animation": "resetBook 2s linear 1"
})
// 转到一半时 设置正反面 z-index
setTimeout(() => {
$(this).css({
"z-index": index
})
$childFront.css({'z-index': index})
$childBack.css({'z-index': index - 1})
}, 1000) // 去除标记
$(this).removeClass('flag') } else {
// 设置css执行动画效果
$(this).css({
"animation": "turning 2s linear 1",
"animation-fill-mode": "forwards",
}) // 动画完成后将设置翻转后的z-index
// 兼容chrome浏览器
const isChrome = navigator.userAgent.indexOf('Chrome')
if (isChrome > -1) {
setTimeout(() => {
$(this).css({
'z-index': index,
"box-shadow": "0 6px 10px rgba(0,0,0,.2)"
})
},2000)
} else {
setTimeout(() => {
$(this).css({
'z-index': index * -1,
"box-shadow": "0 6px 10px rgba(0,0,0,.2)"
})
},2000)
}
// 转到一半时 设置正反面 z-index
setTimeout(() => {
$childFront.css({'z-index': index})
$childBack.css({'z-index': index + 1})
}, 1000) // 添加标记
$(this).addClass('flag')
}
}
}
})
})
</script>
效果如下：