css3图书3D动画

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3图书3D动画的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>css3图书3D动画</title>
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="container group">
        <h1 class="main-title">css3图书3D动画</h1>
        <a href="#" class="book-container">
            <div class="book">

                <div class="book-cover">
                    <img src="images/cover.jpg" alt="" />
                </div>
                <div class="book-spine">
                    <h1>Photography for Chinaz</h1>
                </div>

            </div>
        </a>
    </div>
</body>
</html>

CSS代码(reset.css):

/*html5doctor.com Reset Stylesheetv1.42009-07-27Author:Richard Clark - http://richclarkdesign.com*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;margin:0;}
article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;}
nav ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;outline:0;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}

CSS代码(style.css):

/*Float clearing goodness from Handcrafted CSS book---------------------------------------------------------------------------------------------------------------------------------------------------- */
.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:#0b3065 url(images/bg.jpg) center top fixed no-repeat;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);}
@font-face{font-family:'league_gothic_condensedRg';src:url('fonts/leaguegothic-condensedregular-webfont.eot');src:url('fonts/leaguegothic-condensedregular-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/leaguegothic-condensedregular-webfont.woff') format('woff'),url('fonts/leaguegothic-condensedregular-webfont.ttf') format('truetype'),url('fonts/leaguegothic-condensedregular-webfont.svg#league_gothic_condensedRg') format('svg');font-weight:normal;font-style:normal;}
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---------------------------------------------------------------------------------------------------------------------------------------------------- */
.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/ridge.png) repeat-y;z-index:20;-webkit-transform:translateZ(1px);/* Fix for flickering in Chrome */
}
.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 and spine---------------------------------------------------------------------------------------------------------------------------------------------------- */
.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/spine.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);}

附件:下载该文件资源,减少时间成本(增值服务)