3D CSS3 Book Generator with jQuery Today we made up my mind to develop something really interesting and useful for you. A new jQuery plugin – as a generator of books. The main idea is to display user friendly book basing on raw text (with images). The book consists of pages, each page consists of 2 sides (as in a usual book), there are buttons Back-Next at the sides of pages to navigate through the pages, and when we turn the pages we see that the pages are turned in 3D (powered by CSS3). In order to achieve this 3D effect we use CSS3 transform (rotate3d, preserve-3d and rotateY) and transition effects.
使用jQuery的3D CSS3图书生成器今天，我们下定决心要开发对您来说非常有趣和有用的东西。 一个新的jQuery插件–作为书籍的生成器。 主要思想是基于原始文本(带有图像)显示用户友好的书。 这本书由几页组成，每页由两面组成(就像平常的书一样)，在页面的两边都有按钮Back-Next来浏览页面，当我们翻动页面时，我们看到页面已经翻过3D(由CSS3支持)。 为了获得3D效果，我们使用CSS3变换(rotate3d，preserve-3d和RotateY)和过渡效果。
现场演示
步骤1. HTML (Step 1. HTML)
As we told, our HTML markup is a raw text with image (as a cover of our book). But you can use everything you want here:
如前所述，HTML标记是带有图像的原始文本(作为本书的封面)。 但是您可以在这里使用所需的一切：
index.html (index.html)
<div class="book">
<img src="book.jpg" alt="JavaScript Programmer's Reference" style="display:block" />
<h2>JavaScript Programmer's Reference</h2>
<h4>Cliff Wootton</h4>
<h4>Wrox Press Ltd.</h4>
<div>JavaScript Programmer's Reference</div>
<h3>About the Author</h3>
<div>Cliff Wootton lives in the south of England and works on multimedia systems and content management software for large data driven web sites. Currently he is developing interactive TV systems for BBC News Online in London ( http://www.bbc.co.uk/news ) and previously worked for other commercial broadcasters on their web sites. Before that he spent several years developing geophysical software and drawing maps with computers for oil companies.</div>
<div>Cliff is married with three daughters and a growing collection of bass guitars.</div>
<h3>Acknowledgements</h3>
<div>It's hard to believe I've actually reached the stage of writing the introductory pages to this book. It's been a long process and I don't think I would have reached this point without the help of Tim Briggs at Wrox, who very gently urged me onwards and gave me encouragement when I needed it.</div>
</div>
<div class="book">
<img src="book.jpg" alt="JavaScript Programmer's Reference" style="display:block" />
<h2>JavaScript Programmer's Reference</h2>
<h4>Cliff Wootton</h4>
<h4>Wrox Press Ltd.</h4>
<div>JavaScript Programmer's Reference</div>
<h3>About the Author</h3>
<div>Cliff Wootton lives in the south of England and works on multimedia systems and content management software for large data driven web sites. Currently he is developing interactive TV systems for BBC News Online in London ( http://www.bbc.co.uk/news ) and previously worked for other commercial broadcasters on their web sites. Before that he spent several years developing geophysical software and drawing maps with computers for oil companies.</div>
<div>Cliff is married with three daughters and a growing collection of bass guitars.</div>
<h3>Acknowledgements</h3>
<div>It's hard to believe I've actually reached the stage of writing the introductory pages to this book. It's been a long process and I don't think I would have reached this point without the help of Tim Briggs at Wrox, who very gently urged me onwards and gave me encouragement when I needed it.</div>
</div>
步骤2. CSS (Step 2. CSS)
Now we have to define general CSS3 styles for our book:
现在，我们必须为我们的书定义常规CSS3样式：
style.css (style.css)
body {
background: url('background.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* CSS3 perspective and transform */
-webkit-perspective: 1800px;
-moz-perspective: 1800px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.book {
left: 530px;
position: absolute;
top: 70px;
width: 400px;
/* CSS3 transform */
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-moz-transform: rotate3d(0, 0, 1, 0deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.page {
background-color: #fff;
position: absolute;
/* CSS3 transform */
-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.side:first-child {
background: -webkit-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
border-left: 2px solid #000;
height: 500px;
overflow: hidden;
padding: 30px 35px 80px 35px;
position: absolute;
width: 400px;
/* CSS3 transform */
-webkit-transform: translate3d(0px, 0px, 0.5px);
-moz-transform: translate3d(0px, 0px, 0.5px);
}
.side:last-child {
background: -webkit-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
border-right: 2px solid #000;
height: 500px;
overflow: hidden;
padding: 30px 35px 80px 35px;
position: absolute;
width: 400px;
/* CSS3 transform */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
button {
margin-top:10px;
float:right;
cursor:pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #050505;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#fff 0%,
#ebebeb 50%,
#dbdbdb 50%,
#b5b5b5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#fff),
color-stop(0.50, #ebebeb),
color-stop(0.50, #dbdbdb),
to(#b5b5b5));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #949494;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,1);
}
body {
background: url('background.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* CSS3 perspective and transform */
-webkit-perspective: 1800px;
-moz-perspective: 1800px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.book {
left: 530px;
position: absolute;
top: 70px;
width: 400px;
/* CSS3 transform */
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-moz-transform: rotate3d(0, 0, 1, 0deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.page {
background-color: #fff;
position: absolute;
/* CSS3 transform */
-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.side:first-child {
background: -webkit-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
border-left: 2px solid #000;
height: 500px;
overflow: hidden;
padding: 30px 35px 80px 35px;
position: absolute;
width: 400px;
/* CSS3 transform */
-webkit-transform: translate3d(0px, 0px, 0.5px);
-moz-transform: translate3d(0px, 0px, 0.5px);
}
.side:last-child {
background: -webkit-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
border-right: 2px solid #000;
height: 500px;
overflow: hidden;
padding: 30px 35px 80px 35px;
position: absolute;
width: 400px;
/* CSS3 transform */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
button {
margin-top:10px;
float:right;
cursor:pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #050505;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#fff 0%,
#ebebeb 50%,
#dbdbdb 50%,
#b5b5b5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#fff),
color-stop(0.50, #ebebeb),
color-stop(0.50, #dbdbdb),
to(#b5b5b5));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #949494;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,1);
}
步骤3. HTML5 JavaScript (Step 3. HTML5 JavaScript)
Now, the most important step – javascript code (of our jQuery generator plugin), please create an empty script.js file and paste the next code:
现在，最重要的步骤是(我们的jQuery生成器插件的)JavaScript代码，请创建一个空的script.js文件并粘贴下一个代码：
script.js (script.js)
// Goto page function
function gotoPage(i) {
$('.page').eq(i).removeClass('active');
if ((i-1) >= 0) {
$('.page').eq(i-1).addClass('active');
}
}
// Wrap everything as a jQuery plugin
(function($){
$.fn.extend({
EbookTransformer: function(options) {
var defaults = {
height: 400
};
var options = $.extend(defaults, options);
// The book object
var objBook = $(this);
// Inner variables
var vPages = new Array();
var vSides = new Array();
var vSubObj = new Array();
var iTmpHeight = 0;
// initialization function
init = function() {
// Walk through all the objects of the book, and prepare Sides (for Pages)
objBook.children().each(function(i){
if (iTmpHeight + this.clientHeight > options.height && vSubObj.length) {
vSides.push(vSubObj);
vSubObj = new Array();
iTmpHeight = 0;
}
iTmpHeight += this.clientHeight;
vSubObj.push(this);
});
if (iTmpHeight > 0) {
vSides.push(vSubObj);
}
$(vSides).wrap('<div class="side"></div>');
// Prepare Pages (each Page consists of 2 Sides)
var iPage = 1;
var vCouples = Array();
objBook.children().each(function(i){
// Add Next and Prev buttons
if (vCouples.length == 0) {
$(this).append('<button onclick="gotoPage('+iPage+')">Next page</button>');
}
if (vCouples.length == 1) {
$(this).append('<button onclick="gotoPage('+(iPage-1)+')">Previous page</button>');
}
vCouples.push(this);
if (vCouples.length == 2) {
vPages.push(vCouples);
vCouples = new Array();
iPage++;
}
});
if (vCouples.length == 1) {
vCouples.push($('<div class="side"><h2>The end</h2><button onclick="gotoPage('+(iPage-1)+')">Previous page</button></div>')[0]);
vPages.push(vCouples);
}
$(vPages).wrap('<div class="page"></div>');
// Add extra CSS for the pages
var sExtraCSS = '';
objBook.children().each(function(i){
//alert(i); // 0 .. 2
sExtraCSS += ''+
'.page:nth-child('+(i+1)+') {'+
'-moz-transform: translate3d(0px, 0px, -'+i+'px);'+
'-webkit-transform: translate3d(0px, 0px, -'+i+'px);'+
'}'+
'.active:nth-child('+(i+1)+') {'+
'-moz-transform: rotateY(-179deg) translate3d(0px, 0px, -'+i+'px);'+
'-webkit-transform: rotateY(-179deg) translate3d(0px, 0px, -'+i+'px);'+
'}';
});
$('.book').append('<style>'+sExtraCSS+'</style>');
};
// initialization
init();
}
});
})(jQuery);
// Window onload
jQuery(window).load(function() {
$('.book').EbookTransformer({height: 480});
});
// Goto page function
function gotoPage(i) {
$('.page').eq(i).removeClass('active');
if ((i-1) >= 0) {
$('.page').eq(i-1).addClass('active');
}
}
// Wrap everything as a jQuery plugin
(function($){
$.fn.extend({
EbookTransformer: function(options) {
var defaults = {
height: 400
};
var options = $.extend(defaults, options);
// The book object
var objBook = $(this);
// Inner variables
var vPages = new Array();
var vSides = new Array();
var vSubObj = new Array();
var iTmpHeight = 0;
// initialization function
init = function() {
// Walk through all the objects of the book, and prepare Sides (for Pages)
objBook.children().each(function(i){
if (iTmpHeight + this.clientHeight > options.height && vSubObj.length) {
vSides.push(vSubObj);
vSubObj = new Array();
iTmpHeight = 0;
}
iTmpHeight += this.clientHeight;
vSubObj.push(this);
});
if (iTmpHeight > 0) {
vSides.push(vSubObj);
}
$(vSides).wrap('<div class="side"></div>');
// Prepare Pages (each Page consists of 2 Sides)
var iPage = 1;
var vCouples = Array();
objBook.children().each(function(i){
// Add Next and Prev buttons
if (vCouples.length == 0) {
$(this).append('<button onclick="gotoPage('+iPage+')">Next page</button>');
}
if (vCouples.length == 1) {
$(this).append('<button onclick="gotoPage('+(iPage-1)+')">Previous page</button>');
}
vCouples.push(this);
if (vCouples.length == 2) {
vPages.push(vCouples);
vCouples = new Array();
iPage++;
}
});
if (vCouples.length == 1) {
vCouples.push($('<div class="side"><h2>The end</h2><button onclick="gotoPage('+(iPage-1)+')">Previous page</button></div>')[0]);
vPages.push(vCouples);
}
$(vPages).wrap('<div class="page"></div>');
// Add extra CSS for the pages
var sExtraCSS = '';
objBook.children().each(function(i){
//alert(i); // 0 .. 2
sExtraCSS += ''+
'.page:nth-child('+(i+1)+') {'+
'-moz-transform: translate3d(0px, 0px, -'+i+'px);'+
'-webkit-transform: translate3d(0px, 0px, -'+i+'px);'+
'}'+
'.active:nth-child('+(i+1)+') {'+
'-moz-transform: rotateY(-179deg) translate3d(0px, 0px, -'+i+'px);'+
'-webkit-transform: rotateY(-179deg) translate3d(0px, 0px, -'+i+'px);'+
'}';
});
$('.book').append('<style>'+sExtraCSS+'</style>');
};
// initialization
init();
}
});
})(jQuery);
// Window onload
jQuery(window).load(function() {
$('.book').EbookTransformer({height: 480});
});
The main idea is similar which we used in my jQuery pagination tutorial. This idea is to parse all the input data (our raw text) and compose a new HTML structure for our 3D book. In the first step we go through all the inner elements, and turn them into Sides (for our pages). We should check for heights of inner elements, and, in case if total height of a side elements is more than max allowed, we start collecting the next side. In the second step we turn the result Sides into pages. Each page consists of a couple of Sides. Also we add the navigation buttons in the second step. And finally, to position the pages one on top of another we have to compose extra CSS styles (on fly). We use CSS3 translate3d property to prepare custom styles (with different Z value) for all the generated pages.
主要思想与我们在jQuery分页教程中使用的相似。 这个想法是解析所有输入数据(我们的原始文本)，并为我们的3D图书组成一个新HTML结构。 第一步，我们遍历所有内部元素，然后将它们变成Sides(针对我们的页面)。 我们应该检查内部元素的高度，并且如果侧面元素的总高度大于允许的最大值，我们将开始收集下一个侧面。 在第二步中，我们将结果Sides转换为页面。 每个页面由几个面组成。 另外，我们在第二步中添加了导航按钮。 最后，要使页面一页一页地放置，我们必须(动态)编写额外CSS样式。 我们使用CSS3 translation3d属性为所有生成的页面准备自定义样式(具有不同的Z值)。
现场演示
[sociallocker]
[社交储物柜]
下载包
[/sociallocker]
[/ sociallocker]
结论 (Conclusion)
The future is getting closer. I hope that everything is clean for today. If you have any suggestions about further ideas for articles – you are welcome to share them with us. Good luck in your work!
未来越来越近。 我希望今天一切都干净。 如果您对文章的进一步建议有任何建议，欢迎与我们分享。 祝您工作顺利！
翻译自: https://www.script-tutorials.com/3d-css3-book-generator-with-jquery/
9385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
