我们知道要想实现一个酷炫的3d翻书效果，需要借助3dmax等一些软件，今天我们就用css来实现一个逼真的3d翻书效果，如下图所示：
<html>
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png"
href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon"
href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="image/x-icon"
href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
color="#111">
<title>css实现3d翻书逼真效果(含源码)</title>
<style>
/* remember to use - transform-style: preserve-3d; */
html,
body {
height: 100%;
overflow: hidden;
}
body {
background: radial-gradient(#E4CEA6, #9C8763);
perspective: 900px;
margin: 0;
}
#flip {
-webkit-animation: wrapper 6s ease-in-out infinite;
animation: wrapper 6s ease-in-out infinite;
height: 350px;
width: 253px;
position: absolute;
left: 50%;
top: 30%;
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg) !important;
transform-style: preserve-3d;
transform-origin: 0 0 0;
}
@-webkit-keyframes wrapper {
50% {
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
}
}
@keyframes wrapper {
50% {
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
}
}
#flip div {
height: 350px;
width: 24px;
position: absolute;
left: calc(100% - 1px);
transform-origin: 0 100%;
transform-style: preserve-3d;
background-size: 253px 350px;
}
#flip #front,
#flip #front div {
background-image: url(http://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.jpg);
box-shadow: inset rgba(255, 255, 255, 0.3) 0px -1px 0 0, #35582C 0px 1px 0px 0px;
}
#flip #front>div>div>div>div>div>div>div>div>div>div {
box-shadow: inset rgba(255, 255, 255, 0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
}
#flip #back {
transform: rotateY(.4deg);
transform-origin: -100% 0;
}
/* avoid pages overlap */
#flip #back,
#flip #back div {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map1_.jpg);
}
#flip>div {
left: 0;
background-position-x: 0;
}
#flip div>div {
background-position-x: -23px;
-webkit-animation: page 6s ease-in-out infinite;
animation: page 6s ease-in-out infinite;
}
#flip div>div>div {
background-position-x: -46px;
}
#flip div>div>div>div {
background-position-x: -69px;
}
#flip div>div>div>div>div {
background-position-x: -92px;
}
#flip div>div>div>div>div>div {
background-position-x: -115px;
}
#flip div>div>div>div>div>div>div {
background-position-x: -138px;
}
#flip div>div>div>div>div>div>div>div {
background-position-x: -161px;
}
#flip div>div>div>div>div>div>div>div>div {
background-position-x: -184px;
}
#flip div>div>div>div>div>div>div>div>div>div {
background-position-x: -207px;
}
#flip div>div>div>div>div>div>div>div>div>div>div {
background-position-x: -229px;
}
/* the more pieces you have, the smoother the bend is */
@-webkit-keyframes page {
15% {
transform: rotateY(-10deg);
}
50% {
transform: rotateY(-2deg);
}
65% {
transform: rotateY(10deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes page {
15% {
transform: rotateY(-10deg);
}
50% {
transform: rotateY(-2deg);
}
65% {
transform: rotateY(10deg);
}
100% {
transform: rotateY(0deg);
}
}
#book {
width: 248px;
height: 350px;
position: absolute;
left: 50%;
top: 30%;
transform: translate3d(0px, 0px, -10px) rotateX(60deg) rotateZ(29deg);
transform-style: preserve-3d;
-webkit-transform-origin: 0 0 0;
}
@-webkit-keyframes book {
25% {
box-shadow: inset rgba(0, 0, 0, .2) 0px 0 50px -140px;
}
50% {
box-shadow: inset rgba(0, 0, 0, .2) 0px 0 50px -140px;
}
100% {
box-shadow: inset rgba(0, 0, 0, .2) 510px 0 50px -140px;
}
}
@keyframes book {
25% {
box-shadow: inset rgba(0, 0, 0, .2) 0px 0 50px -140px;
}
50% {
box-shadow: inset rgba(0, 0, 0, .2) 0px 0 50px -140px;
}
100% {
box-shadow: inset rgba(0, 0, 0, .2) 510px 0 50px -140px;
}
}
#book #top {
-webkit-animation: book 6s ease-in-out infinite;
animation: book 6s ease-in-out infinite;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map2.jpg);
background-size: 100% 100%;
background-position: 100%;
box-shadow: inset rgba(0, 0, 0, 0.2) 510px 0 50px -140px;
height: 350px;
width: 248px;
position: absolute;
left: 0;
top: 0;
}
#book #bottom {
background: #E7DED1;
box-shadow: rgba(83, 53, 13, 0.2) 4px 2px 1px,
#35582C 1px 1px 0px 0px;
height: 350px;
width: 253px;
position: absolute;
transform: translateZ(-40px);
left: 0;
top: 0;
}
#book #shadow {
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
height: 350px;
width: 248px;
position: absolute;
left: -100%;
top: 0;
transform: translateZ(-40px);
}
@-webkit-keyframes shadow {
20% {
box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
}
50% {
box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
}
60% {
box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
}
}
@keyframes shadow {
20% {
box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
}
50% {
box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
}
60% {
box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
}
}
#book #front {
background: -webkit-linear-gradient(top, #FCF6EA, #D8D1C3);
background-size: 100% 2px;
box-shadow: inset #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px;
height: 40px;
width: 251px;
left: -3px;
position: absolute;
bottom: -40px;
transform: rotateX(-90deg);
transform-origin: 50% 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#book #right {
background: -webkit-linear-gradient(left, #DDD2BB, #BDB3A0);
background-size: 2px 100%;
box-shadow: inset rgba(0, 0, 0, 0) 0 0 0 20px;
height: 100%;
width: 40px;
position: absolute;
right: -40px;
top: 0;
transform: rotateY(90deg);
transform-origin: 0 50%;
}
h4 {
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
font-weight: 200;
opacity: 1;
font-family: sans-serif;
color: rgba(0, 0, 0, 0.3);
}
/* bookmark */
#bookmark {
position: absolute;
transform: translate3d(20px, 350px, -16px);
transform-style: preserve-3d;
}
#bookmark div {
background: rgb(151, 88, 88);
box-shadow: rgb(133, 77, 77) 1px 0;
height: 10px;
width: 20px;
position: absolute;
top: 9px;
transform: rotateX(-14deg);
transform-origin: 50% 0;
transform-style: preserve-3d;
}
#bookmark>div>div {
background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
}
#bookmark>div>div>div {
background: linear-gradient(top, rgb(151, 88, 88), rgb(133, 77, 77));
}
#bookmark>div>div>div>div {
background: none;
border-top: 0px solid transparent;
border-right: 10px solid rgb(133, 77, 77);
border-bottom: 10px solid transparent;
border-left: 10px solid rgb(133, 77, 77);
height: 0;
width: 0;
}
#bookmark-shadow {
background: linear-gradient(top, rgba(83, 53, 13, 0.25), rgba(83, 53, 13, 0.11));
height: 15px;
width: 20px;
position: absolute;
transform: translate3d(12px, 350px, -25px) rotateX(-90deg) skewX(20deg);
transform-origin: 0 0;
}
</style>
<script>
window.console = window.console || function (t) { };
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<!-- Please heart it if you like! -->
<div id="book">
<div id="top"></div>
<div id="front"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="shadow"></div>
<div id="bookmark">
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
<div id="bookmark-shadow"></div>
</div>
<div id="flip">
<div id="front">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="back">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h4>CSS 3D Bending Effect - Page Flip</h4>
<script
src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src="https://codepen.io/_fbrz/pen/KKEJOv/9a3e4ee2ef6dfd479ad33a2c85146fc1.js"></script>
<script id="rendered-js">
//You may also like Plugin
/*alsolike(
"iqtlk", "Pure CSS Weather Icons",
"nKCsI", "Semantic Sandwich",
"vlrnd", "CSS Only iPhone 6"
);*/
//# sourceURL=pen.js
</script>
<div id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
<div></div>
<a id="xl_chrome_ext_download" href="javascript:;">下载视频</a>
<a id="xl_chrome_ext_close" href="javascript:;"></a>
</div>
</body>
</html>通过以上内容我们知道了css如何实现3d翻书的逼真效果？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！
