CSS实现书籍3D翻页效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></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 div {
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 div {
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 > 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 {
-webkit-transform: rotateY(.2deg);
transform: rotateY(.2deg);
}
/* avoid pages overlap */
#flip #back,
#flip #back div {
background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png);
}
#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% {
-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 div {
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 > div > div {
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 > div > div > div {
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 > 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: -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>
<!-- 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翻书效果</h4>
</body>
</html>
.
相关推荐
在CSS3中，立体3D翻页效果是一种高级的网页设计技术，它为网页增添了动态和交互性，使用户能够以模拟真实书籍翻页的方式浏览内容。这种效果通常用于电子书、画册或者任何需要展示多页面内容的场景。下面我们将深入...
BookBlock是一个jQuery插件，可用于创建小册子的组件，允许一个“翻页”的导航。可以将任何内容，如图像或文本。该插件的结构转换只在需要时（即当翻转页面）的网页，并使用了一些阴影效果。 请在支持CSS3属性的...
本示例"jQuery+css3实现3D翻书页面布局效果"正是这种技术的应用，通过结合强大的JavaScript库jQuery和现代CSS3技术，开发者可以轻松地创建出逼真的3D翻页动画。 首先，jQuery是一个轻量级的JavaScript库，它简化了...
5. **插件**：描述中提到的"基于插件实现"，可能指的是一个特定的JavaScript插件，如turn.js或bookblock.js等，这些插件专门设计用于创建3D翻页效果，可以减少从零开始实现此类功能的工作量。 6. **响应式设计**：...
例如，翻页效果可能依赖于CSS3的3D转换、过渡（transition）和动画（animation）等特性，这些在Internet Explorer 9及以下版本中通常不被支持。为了确保更广泛的兼容性，开发者需要结合使用JavaScript库（如jQuery）...
在电子书领域，3D翻页效果是一种模拟真实书籍翻页体验的技术，它为数字阅读带来了一种生动而直观的互动感受。这种效果通常由专门的软件或库来实现，如在描述中提到的"ireader"。在这里，我们将深入探讨3D翻页效果的...
2. **3D变换**: CSS3中的3D变换是实现翻页效果的核心。通过transform属性，我们可以对元素进行旋转（rotateX, rotateY）、缩放（scale）等操作，模拟纸张在三维空间中的运动轨迹。 3. **透视（perspective）**: ...
2. **3D Transforms**：为了实现逼真的翻页效果，我们需要利用CSS3的3D变换。通过`transform: perspective()`设置透视效果，`rotateX()`和`rotateY()`来实现页面在X轴或Y轴上的旋转，从而模拟出立体翻页的感觉。 3....
在uniapp中实现翻页效果，可以利用其提供的组件和API，结合CSS3的3D变换，实现流畅的翻页动画。 实现纸质翻页效果的关键技术点有以下几点： 1. **3D变换**：利用CSS3的`transform`属性，设置`rotateY`和`...
在IT行业中，3D翻页效果是一种常见的用户体验设计，它为数字阅读提供了模拟真实书籍翻页的视觉体验。这种效果通常应用于电子书、杂志、画册等应用中，旨在增加用户的沉浸感和互动性。下面将详细介绍3D翻页效果的实现...
在这个项目中，CSS3的3D转换被用来创建逼真的翻页效果，通过`transform`属性，可以改变元素的大小、位置甚至形状，实现页面从一侧向另一侧平滑地“翻开”。 jQuery是一个广泛使用的JavaScript库，它简化了...
在书籍翻页动画中，恰当的透视可以让翻页效果更具有立体感。 6. **伪元素和边框半径**：`::before`和`::after`伪元素可以用来添加额外的元素，比如书籍的封面和封底，通过调整边框半径，可以创建出书页的角部形状，...
在纯CSS实现的翻页效果中，主要依赖于`transform`属性，尤其是`rotate`和`perspective`。`rotate`用于旋转元素，而`perspective`则可以创建3D视角，让翻页看起来更立体。此外，`transition`属性用于定义元素从一种...
图书翻页效果通常涉及到CSS3的3D变换、过渡和动画效果，这些特性让网页元素能够进行平滑、动态的改变。在HTML5中，我们可以通过创建两个页面元素，分别代表书的左右两页，然后通过CSS3的transform属性来模拟翻页动作...
本项目采用HTML、CSS和JavaScript技术在浏览器环境中实现了图书翻页效果，不仅支持正向翻页，还支持逆向翻页，充分考虑了用户的不同需求。此外，项目还集成了语言转换功能，这在多语言网站或应用中尤其有用。 首先...
为了实现更逼真的翻页效果，我们还需要考虑阴影和透视。CSS3的`box-shadow`属性可以添加阴影，模拟光线照射在书页上的效果，而`perspective`属性则可以为整个翻书容器设置透视，使观察者看起来像是从一定距离外观看...
总的来说，实现真实书籍翻页效果是一项结合了CSS3动画和JavaScript交互的综合技术，它需要开发者对这两方面都有深入的理解和熟练的运用。通过这样的技术，我们可以为用户带来更加生动、真实的在线阅读体验。