Home » Tutorials

3D CSS3 Book Generator with jQuery

Tutorials
Author Reading 17 min Views 95 Published by Modified by

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.

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. style.css
  5. Step 3. HTML5 JavaScript
  6. script.js
  7. Conclusion
Live Demo

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:

index.html

01 <div class="book">
02     <img src="book.jpg" alt="JavaScript Programmer's Reference" style="display:block" />
03     <h2>JavaScript Programmer's Reference</h2>
04     <h4>Cliff Wootton</h4>
05     <h4>Wrox Press Ltd.</h4>
06     <div>JavaScript Programmer's Reference</div>
07     <h3>About the Author</h3>
08     <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>
09     <div>Cliff is married with three daughters and a growing collection of bass guitars.</div>
10     <h3>Acknowledgements</h3>
11     <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>
12 </div>

Step 2. CSS

Now we have to define general CSS3 styles for our book:

style.css

01 body {
02     background: url('background.png') no-repeat center center fixed;
03     -webkit-background-size: cover;
04     -moz-background-size: cover;
05     -o-background-size: cover;
06     background-size: cover;
07     /* CSS3 perspective and transform */
08     -webkit-perspective: 1800px;
09     -moz-perspective: 1800px;
10     -moz-transform-style: preserve-3d;
11     -webkit-transform-style: preserve-3d;
12 }
13 .book {
14     left: 530px;
15     position: absolute;
16     top: 70px;
17     width: 400px;
18     /* CSS3 transform */
19     -webkit-transform: rotate3d(0, 0, 1, 0deg);
20     -moz-transform: rotate3d(0, 0, 1, 0deg);
21     -webkit-transform-style: preserve-3d;
22     -moz-transform-style: preserve-3d;
23 }
24 .page {
25     background-color: #fff;
26     position: absolute;
27     /* CSS3 transform */
28     -webkit-transition: all 1s ease-in-out 0s;
29     -moz-transition: all 1s ease-in-out 0s;
30     -webkit-transform-style: preserve-3d;
31     -moz-transform-style: preserve-3d;
32 }
33 .side:first-child {
34     background: -webkit-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
35     background: -moz-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
36     border-left: 2px solid #000;
37     height: 500px;
38     overflow: hidden;
39     padding: 30px 35px 80px 35px;
40     position: absolute;
41     width: 400px;
42     /* CSS3 transform */
43     -webkit-transform: translate3d(0px, 0px, 0.5px);
44     -moz-transform: translate3d(0px, 0px, 0.5px);
45 }
46 .side:last-child {
47     background: -webkit-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
48     background: -moz-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
49     border-right: 2px solid #000;
50     height: 500px;
51     overflow: hidden;
52     padding: 30px 35px 80px 35px;
53     position: absolute;
54     width: 400px;
55     /* CSS3 transform */
56     -webkit-transform: rotateY(180deg);
57     -moz-transform: rotateY(180deg);
58 }
59 button {
60     margin-top:10px;
61     float:right;
62     cursor:pointer;
63     font-family: Arial, Helvetica, sans-serif;
64     font-size: 14px;
65     color: #050505;
66     padding: 10px 20px;
67     background: -moz-linear-gradient(
68         top,
69         #fff 0%,
70         #ebebeb 50%,
71         #dbdbdb 50%,
72         #b5b5b5);
73     background: -webkit-gradient(
74         linear, left top, left bottom,
75         from(#fff),
76         color-stop(0.50, #ebebeb),
77         color-stop(0.50, #dbdbdb),
78         to(#b5b5b5));
79     -moz-border-radius: 10px;
80     -webkit-border-radius: 10px;
81     border-radius: 10px;
82     border: 1px solid #949494;
83     -moz-box-shadow:
84         0px 1px 3px rgba(000,000,000,0.5),
85         inset 0px 0px 2px rgba(255,255,255,1);
86     -webkit-box-shadow:
87         0px 1px 3px rgba(000,000,000,0.5),
88         inset 0px 0px 2px rgba(255,255,255,1);
89     box-shadow:
90         0px 1px 3px rgba(000,000,000,0.5),
91         inset 0px 0px 2px rgba(255,255,255,1);
92     text-shadow:
93         0px -1px 0px rgba(000,000,000,0.2),
94         0px 1px 0px rgba(255,255,255,1);
95 }

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:

script.js

01 // Goto page function
02 function gotoPage(i) {
03     $('.page').eq(i).removeClass('active');
04     if ((i-1) >= 0) {
05         $('.page').eq(i-1).addClass('active');
06     }
07 }
08 // Wrap everything as a jQuery plugin
09 (function($){
10     $.fn.extend({
11         EbookTransformer: function(options) {
12             var defaults = {
13                 height: 400
14             };
15             var options = $.extend(defaults, options);
16             // The book object
17             var objBook = $(this);
18             // Inner variables
19             var vPages = new Array();
20             var vSides = new Array();
21             var vSubObj = new Array();
22             var iTmpHeight = 0;
23             // initialization function
24             init = function() {
25                 // Walk through all the objects of the book, and prepare Sides (for Pages)
26                 objBook.children().each(function(i){
27                     if (iTmpHeight + this.clientHeight > options.height && vSubObj.length) {
28                         vSides.push(vSubObj);
29                         vSubObj = new Array();
30                         iTmpHeight = 0;
31                     }
32                     iTmpHeight += this.clientHeight;
33                     vSubObj.push(this);
34                 });
35                 if (iTmpHeight > 0) {
36                     vSides.push(vSubObj);
37                 }
38                 $(vSides).wrap('<div class="side"></div>');
39                 // Prepare Pages (each Page consists of 2 Sides)
40                 var iPage = 1;
41                 var vCouples = Array();
42                 objBook.children().each(function(i){
43                     // Add Next and Prev buttons
44                     if (vCouples.length == 0) {
45                         $(this).append('<button onclick="gotoPage('+iPage+')">Next page</button>');
46                     }
47                     if (vCouples.length == 1) {
48                         $(this).append('<button onclick="gotoPage('+(iPage-1)+')">Previous page</button>');
49                     }
50                     vCouples.push(this);
51                     if (vCouples.length == 2) {
52                         vPages.push(vCouples);
53                         vCouples = new Array();
54                         iPage++;
55                     }
56                 });
57                 if (vCouples.length == 1) {
58                     vCouples.push($('<div class="side"><h2>The end</h2><button onclick="gotoPage('+(iPage-1)+')">Previous page</button></div>')[0]);
59                     vPages.push(vCouples);
60                 }
61                 $(vPages).wrap('<div class="page"></div>');
62                 // Add extra CSS for the pages
63                 var sExtraCSS = '';
64                 objBook.children().each(function(i){
65                     //alert(i); // 0 .. 2
66                     sExtraCSS += ''+
67                     '.page:nth-child('+(i+1)+') {'+
68                     '-moz-transform: translate3d(0px, 0px, -'+i+'px);'+
69                     '-webkit-transform: translate3d(0px, 0px, -'+i+'px);'+
70                     '}'+
71                     '.active:nth-child('+(i+1)+') {'+
72                     '-moz-transform: rotateY(-179deg) translate3d(0px, 0px, -'+i+'px);'+
73                     '-webkit-transform: rotateY(-179deg) translate3d(0px, 0px, -'+i+'px);'+
74                     '}';
75                 });
76                 $('.book').append('<style>'+sExtraCSS+'</style>');
77             };
78             // initialization
79             init();
80         }
81     });
82 })(jQuery);
83 // Window onload
84 jQuery(window).load(function() {
85     $('.book').EbookTransformer({height: 480});
86 });

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.

Live Demo

[sociallocker]

download package

[/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!

Rate article
© 2025 Script Tutorials