css3 div 书本,纯CSS实现的3D书本

CSS

语言：

CSSSCSS

确定

.container {

margin: 40px;

height: 700px;

animation: turn 5s;

}

@keyframes turn {

0% {

transform: rotateX(0deg) rotateY(0deg);

}

50% {

transform: rotateX(20deg) rotateY(20deg);

}

100% {

transform: rotateX(0deg) rotateY(0deg);

}

}

.front {

width: 420px;

height: 595px;

background: #333333;

transform: rotateX(-30deg) rotateY(35deg);

position: absolute;

border-radius: 0px 5px 5px 0;

color: #f6f6f6;

font-family: 'Montserrat', sans-serif;

}

.front h1 {

padding: 50px;

}

.front h2 {

padding: 50px;

padding-top: 150px;

}

.sidepages {

width: 40px;

height: 598px;

border: 1px solid #333333;

position: absolute;

margin-left: 372px;

margin-top: -40px;

transform: rotateX(30deg) rotateY(50deg);

background: white;

border-right: 12px solid #333333;

border-radius: 0px 5px 5px 20px;

border-top: 0px;

overflow: hidden;

}

.line {

width: 80px;

height: 20px;

border: 1px solid black;

border-top: 0px;

border-right: 1px solid white;

border-left: 0px;

border-radius: 0px 0px 20px 20px;

margin-top: -12px;

margin-left: -20px;

transform: rotateY(50deg);

}

.bottompages {

width: 445px;

height: 48px;

border: 1px solid #333333;

border-right: 0px;

position: absolute;

margin-left: -2px;

margin-top: 538px;

transform: rotateX(-30deg) rotateY(34.8deg);

border-radius: 0px 5px 0px 60px;

border-left: 12px solid #333333;

border-bottom: 12px solid #333333;

}