CSS 3.0实现立体书本特效-CFANZ编程社区

给大家分享一个运用CSS 3.0实现的立体书本特效，效果如下：

CSS 3.0实现立体书本特效_CSS

还真是很像一本书吧，但是需要下面三张图片配合。

1.书的正面图（1.jpg），实际尺寸以代码中的为准。

CSS 3.0实现立体书本特效_3d_02

2.书的侧面（2.jpg），实际尺寸以代码中的为准。

CSS 3.0实现立体书本特效_3d_03

3.书本翻页处的修饰（3.png），实际尺寸以代码中的为准。

CSS 3.0实现立体书本特效_5e_04

哈哈，图太小了，请拿放大镜看。

以下是代码实现，欢迎大家复制粘贴。

<!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>