给大家分享一个运用CSS 3.0实现的立体书本特效，效果如下：
还真是很像一本书吧，但是需要下面三张图片配合。
1.书的正面图（1.jpg），实际尺寸以代码中的为准。
2.书的侧面（2.jpg），实际尺寸以代码中的为准。
3.书本翻页处的修饰（3.png），实际尺寸以代码中的为准。
哈哈，图太小了，请拿放大镜看。
以下是代码实现，欢迎大家复制粘贴。
代码语言：javascript复制<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS 3.0实现立体书本特效</title>
<style>
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .group {
height: 1%;
}
*:first-child html .group {
min-height: 1px;
}
body {
line-height: 1.9em;
color: #fff;
background-color: #0b3065;
background-size: cover;
font-family: arial,
sans-serif;
}
.container {
max-width: 60em;
margin: 0 auto;
padding: 0 2em;
}
.text.container {
max-width: 38em;
text-align: center;
margin: 50px auto 100px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
a {
color: #da9803;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1.main-title {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #fff;
font-weight: normal;
margin: 1.25em;
text-align: center;
font-size: 2.75em;
letter-spacing: -1px;
}
p {
margin-bottom: 1em;
font-size: 1.25em;
}
hr {
margin: 2em 0;
}
.book-container {
width: 375px;
margin: 0 auto;
display: block;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
}
.book {
z-index: 5;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
transition: 0.75s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 125px 0;
-moz-transform-origin: 125px 0;
transform-origin: 125px 0;
}
.book:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 3px;
width: 7px;
/* 翻页转角处的图片 */
background: url(images/3.png) repeat-y;
z-index: 20;
-webkit-transform: translateZ(1px);
}
.book:hover {
-webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
-moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
}
.book-cover {
position: relative;
z-index: 10;
}
.book-cover img {
vertical-align: bottom;
max-width: 100%;
height: auto;
}
.book-spine {
position: absolute;
color: #fff;
position: absolute;
bottom: 0;
top: 0;
width: 50px;
z-index: 5;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
/* 书的侧面图片 */
background: url(images/2.jpg) -64px 0 no-repeat;
background-size: auto 100%;
-webkit-transform: rotateY(-90deg) translateX(-49px);
-moz-transform: rotateY(-90deg) translateX(-49px);
transform: rotateY(-90deg) translateX(-49px);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.book-spine h1 {
display: block;
width: 325px;
text-align: left;
color: #fff;
position: absolute;
top: 0;
left: 39px;
text-indent: 43px;
text-transform: uppercase;
font-family: "league_gothic_condensedRg", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2em;
opacity: 0.75;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
transform: rotateZ(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.book-spine:before {
display: block;
content: "";
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="container group" style="margin-top:200px">
<a class="book-container">
<div class="book">
<div class="book-cover">
<!-- 书的正面图 -->
<img src="images/1.jpg" alt="" />
</div>
<div class="book-spine">
<h1>Photography for Chinaz</h1>
</div>
</div>
</a>
</div>
<div style="text-align:center;clear:both"><br></div>
</body>
</html>
