The number of sites on the Internet is large. It is difficult to remember something unique and like the modern reader. To do this, look for some non-standard steps. This development allows you to visually reflect information in the form of a 3D book (CSS book with page turning). The number of pages of the book is not limited. Allowed to insert text and images (tag “img”).
The table of contents
Photo CSS book
Video CSS book
Description CSS book
During development, we deliberately abandoned IE browser support. When using the Google Chrome browser, no restrictions will apply to you. FireFox will not be able to turn the page when you click on it.
Control unit for Firefox browser.
<div id=”control”>
<a id=”pressLeft” href=”#”>Влево</a>
<a id=”pressRight” href=”#”>Вправо</a>
</div>
The Firefox browser cannot correctly determine which object is left-clicked. This problem is observed for cases, the location of objects on top of each other (position: absolute). In this case, the Z-index of the top object is ignored.
Therefore, especially for him, added buttons “Left” and “Right”.
First page
<div class="page_project page-first page-open">
...
</div>The first page should have a class of “page-first”.
Last page
<div class="page_project page-last page-open">
...
</div>The last page should have the class “page-last”.
Description CSS Book Page
<div class="page_project page-open">
<div class="page_side_left">
<div class="working_area">
<p>
...
</p>
</div>
</div>
<div class="page_side_right">
<div class="working_area">
<p>
...
</p>
</div>
</div>
</div>The class “page_project” is assigned to all pages of the book.
The “page-open” class is assigned to all pages that have not yet been flipped.
The classes “page_side_left” and “page_side_right” are assigned to the left and right of the page to create a 3D effect.
The class “working_area” is intended for indentation on the page.
Start CSS books
All pages will be arranged in Z-index for correct display.
In the future, after each operation of turning the page of a book, development will recalculate z-index objects.
After starting, the CSS book displays an informational message and deletes it by timer.
Download CSS book
Link to download CSS books with flipping pages