Home > Article > Web Front-end > Use CSS to create a 3D page turning effect
Use CSS to create a 3D page turning effect
- php中世界最好的语言Original
- 2018-03-20 14:00:422550browse
This time I will bring you the use of CSS to create a 3D page turning effect. What are the precautions for using CSS to create a 3D page turning effect? The following is a practical case, let's take a look.
Starting today~ The editor will share with you a series of web front-end special effects. Friends who like to play with cool effects, please take a look ^_^. I hope you like it~
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cloth</title>
<style>
html,body {
height:100%;
overflow: hidden;
}
body {
background: -webkit-radial-gradient(#E4CEA6, #9C8763);
background: radial-gradient(#E4CEA6, #9C8763);
-webkit-perspective: 900px;
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%;
-webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg)!important;
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg)!important;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
}
@-webkit-keyframes wrapper {
50% {
-webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
}
}
@keyframes wrapper {
50% {
-webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
}
}
#flip p {
height: 350px;
width: 24px;
position: absolute;
left: calc(100% - 1px);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
background-size: 253px 350px;
}
#flip #front,
#flip #front p {
background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png);
box-shadow: inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px;
}
#flip #front > p > p > p > p > p > p > p > p > p > p {
box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
}
#flip #back { -webkit-transform: rotateY(.2deg); transform: rotateY(.2deg); } /* avoid pages overlap */
#flip #back,
#flip #back p {
background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png);
}
#flip > p { left: 0; background-position-x: 0; }
#flip p > p { background-position-x: -23px; -webkit-animation: page 6s ease-in-out infinite; animation: page 6s ease-in-out infinite; }
#flip p > p > p { background-position-x : -46px; }
#flip p > p > p > p { background-position-x : -69px; }
#flip p > p > p > p > p { background-position-x : -92px; }
#flip p > p > p > p > p > p { background-position-x : -115px; }
#flip p > p > p > p > p > p > p { background-position-x : -138px; }
#flip p > p > p > p > p > p > p > p { background-position-x : -161px; }
#flip p > p > p > p > p > p > p > p > p { background-position-x : -184px; }
#flip p > p > p > p > p > p > p > p > p > p { background-position-x : -207px; }
#flip p > p > p > p > p > p > p > p > p > p > p { background-position-x : -229px; }
/* the more pieces you have, the smoother the bend is */
@-webkit-keyframes page {
15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); }
50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); }
65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); }
100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}
@keyframes page {
15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); }
50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); }
65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); }
100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}
#book {
width: 248px;
height: 350px;
position: absolute;
left:50%;
top: 30%;
-webkit-transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
-webkit-transform-style: preserve-3d;
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(http://img.hoop8.com/attachments/1512/900611208706.png);
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;
-webkit-transform: translateZ(-40px);
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;
-webkit-transform: translateZ(-40px);
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;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
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;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 0 50%;
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;
-webkit-transform: translate3d(20px,350px,-16px);
transform: translate3d(20px,350px,-16px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#bookmark p {
background: rgb(151, 88, 88);
box-shadow: rgb(133,77,77) 1px 0;
height: 10px;
width: 20px;
position: absolute;
top: 9px;
-webkit-transform: rotateX(-14deg);
transform: rotateX(-14deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#bookmark > p > p {
background: -webkit-linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
}
#bookmark > p > p > p {
background: -webkit-linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
background: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
}
#bookmark > p > p > p > p {
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: -webkit-linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
background: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
height: 15px;
width: 20px;
position: absolute;
-webkit-transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
</head>
<body>
<p id='book'>
<p id='top'></p>
<p id='front'></p>
<p id='right'></p>
<p id='bottom'></p>
<p id='shadow'></p>
<p id='bookmark'>
<p>
<p>
<p>
<p></p>
</p>
</p>
</p>
</p>
<p id='bookmark-shadow'></p>
</p>
<p id='flip'>
<p id='front'>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p></p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
<p id='back'>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p></p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
<h4>CSS实现3D翻书效果</h4>
</body>
</html> I believe you have mastered the method after reading the case in this article. , for more exciting content, please pay attention to other related articles on the php Chinese website! Recommended reading:
H5 APP monitoring return event processing
##h5 implements multiple image preview uploads and clickable drag controlsThe above is the detailed content of Use CSS to create a 3D page turning effect. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to clear css floatNext article：How to clear css float