Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	font-size:50px;
	cursor:pointer;
	transition:all 4s;
}
.container {
	display:flex;
	width:100vw;
	min-height:100vh;
	justify-content:center;
	align-items:center;
	-webkit-perspective:1500px;
	perspective:1500px;
	flex-flow:column;
}
.photos {
	width:800px;
	height:580px;
	background-color:#F5DEB3;
	border-radius:10px;
	box-shadow:3px 3px 3px rgba(255,20,90,0.7);
	transform-style:preserve-3d;
	z-index:0;
}
.photos div {
	z-index:999;
	transform-origin:right;
	position:absolute;
	width:380px;
	height:540px;
	margin-left:20px;
	margin-top:20px;
	background-color:black;
	border-radius:10px 0 0 10px;
}
.img img {
	width:375px;
	height:530px;
	margin-left:5px;
	margin-top:5px;
	background-color:rgba(255,255,255,0.5);
}
.tools {
	display:flex;
	margin:5px;
	width:800px;
	height:50px;
	justify-content:space-around;
}
.tools>div {
	width:50px;
	height:50px;
	text-align:center;
	line-height:50px;
	border:solid 1px gray;
	border-radius:25px;
	box-shadow:3px 3px 3px gray;
	position:relative;
}
.add .f {
	opacity:0;
	position:absolute;
	margin:0;
	width:50px;
	height:50px;
	border-radius:25px;
	left:0;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

书籍相册翻书效果

<>左右翻页+-添加删除

1