css3 书页卷脚_CSS3 中间弯折的3D书页

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200,600,700,900);

body {

background: -webkit-linear-gradient(0deg, #e6dada 10%, #274046 90%);

/* W3C */

background: linear-gradient(90deg, #e6dada 10%, #274046 90%);

font-family: 'Source Sans Pro', sans-serif;

text-rendering: optimizeLegibility;

}

div.holder {

height: 600px;

left: 50%;

opacity: 0.8;

-webkit-perspective: 1500;

perspective: 1500;

position: absolute;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6);

top: 50%;

-webkit-transform: translate3d(-50%, -50%, -200px);

transform: translate3d(-50%, -50%, -200px);

width: 400px;

}

div.holder > div {

color: #7a7a7a;

height: 100%;

left: 0;

position: absolute;

top: 0;

-webkit-transition: all 1.5s ease-in;

transition: all 1.5s ease-in;

width: 100%;

}

div.holder > div p {

font-size: 20px;

font-weight: 900;

letter-spacing: 0.075em;

line-height: 2em;

text-transform: uppercase;

position: absolute;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

-webkit-transition: all 1.5s ease-in;

transition: all 1.5s ease-in;

}

div.holder div.left {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

background: #e5e5e5;

text-align: right;

z-index: 10;

}

div.holder div.left p {

right: 20px;

}

div.holder div.right {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

background: #e5e5e5;

-webkit-transform: rotateY(90deg) translate3d(200px, 0, 200px);

transform: rotateY(90deg) translate3d(200px, 0, 200px);

z-index: 5;

}

div.holder div.right p {

left: 20px;

}

div.change div.left {

background: #bfbfbf;

-webkit-transform: rotateY(-45deg) translateX(-200px);

transform: rotateY(-45deg) translateX(-200px);

}

div.change div.left p {

color: #676767;

}

div.change div.right {

background: #fff;

-webkit-transform: rotateY(45deg) translateX(200px);

transform: rotateY(45deg) translateX(200px);

}

div.change div.right p {

color: #8d8d8d;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 #fff;

}

div.toggle {

bottom: 60px;

left: 50%;

opacity: 0.8;

position: absolute;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

div.toggle a {

background: #545454;

border-radius: 4px;

color: #fff;

display: inline-block;

font-weight: 200;

font-size: 18px;

padding: 6px 40px 7px;

text-decoration: none;

letter-spacing: 0.025em;

}

div.toggle a:hover {

background: #141414;

}