3D Book

Developer
Stan Williams
Size
7,405 Kb
Views
28,336
  1. 3D Book Previews
  2. 3D Book HTML Codes
  3. 3D Book CSS Codes
  4. 3D Book JS Codes

How do I make an 3d book?

3D book, turn pages, embeddable content, photos, styled text, even a music player . Made with HTML, CSS3, and Javascript.. What is a 3d book? How do you make a 3d book? This script and codes were developed by Stan Williams on 08 September 2022, Thursday.

3D Book Previews
IQ Test

3D Book - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Book </title> <link href='https://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; position: relative; }
html, body { height: 100%; }
::-webkit-scrollbar {width:12px}
::-webkit-scrollbar-thumb {background: #222;}
::-webkit-scrollbar-track {background: transparent}
::selection { background: #222; color: white; }
::-moz-selection { background: #222; color: white; }
body * { transform-style: preserve-3d; /* am i doing this wrong? */ }
body { background-image: linear-gradient( hsl(240,20%,20%), hsl(30,30%,40%) ); color: #222; font-family: 'Gabriela', serif; perspective: 70em;/*in your face*/ }
h1, p { margin: 5% 0; }
.book { height: 80%; max-height: 640px; min-height: 300px; width: 900px; background-image: linear-gradient( 90deg, hsla(30,40%,50%,.6), hsla(30,40%,20%,.9), hsla(30,40%,50%,.4) 90% ), url(''); position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; border: 10px solid hsla(30,10%,30%,1); border-radius: 5px; box-shadow: 0 0 150px hsla(170,0%,0%,.4); }
.page { height: 100%; width: 50%; border-right: 10px solid transparent; position: absolute; top: 0; right: 0; transform-origin: 0 50%; transition: .6s; /*animation: unflip .3s linear;*/ } [class*='side'] { height: 100%; width: 100%; position: absolute; background-color:#dddddd; background-image: url(''); background-size: 100% 100%; backface-visibility: hidden; overflow: auto; padding: 5% 8%; } .side-1 { z-index: 2; box-shadow: inset 50px 0 50px rgba(0,0,0,.5); transition: .5s; } .side-2 { background-color: #dedede; transform: rotateY(180deg); box-shadow: inset -50px 0 50px rgba(0,0,0,.5); } .flipped > .side-1 { box-shadow: inset 300px 0 50px rgba(0,0,0,.8); transition: .6s; } .flipped > [class*='side'] { pointer-events: auto; }
.page:after { width: 100px; height: 50px; background-color: #555; position: absolute; top: 0; bottom: 0; right: -100px; margin: auto; color: white; text-shadow: 0 -1px 0 #222; line-height: 50px; text-align: center; font-family: monospace; content: 'next-page'; animation: hide .8s linear; } .page.flipped:after { content: 'prev-page'; transform: rotateY(180deg); pointer-events: auto; } /* to hide on flip animation */ @keyframes hide { 0% {opacity: 0;} 85% {opacity: 0;} 100% {opacity: 1;} }
/* first-top last-bottom stack order */
#page-1 { z-index: 4; }
#page-2 { z-index: 3; }
#page-3 { z-index: 2; }
#page-4 { z-index: 1; }
.flipped { transform: rotateY(-180deg); pointer-events: none; /*animation: flip .3s linear; animation-fill-mode: forwards;*/ } /* reverse z-stack order */ #page-1.flipped { z-index: 1; } #page-2.flipped { z-index: 2; } #page-5.flipped { z-index: 3; } #page-4.flipped { z-index: 4; }
.no-anim, .no-anim:after { animation:none;/* disable animation when page loads */ }
@keyframes flip { to { transform: rotateY(-180deg); } }
@keyframes unflip { from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='book'> <div id='page-1' class='page no-anim'> <div class='side-1' id='p1'> <div class='content'> <h2 style="text-align: center; font-size: 38px;">3D Book</h2></span><p></p><hr><p>&nbsp;</p> <p><h3><span style="color: #000000;"> &nbsp; &nbsp; &nbsp; &nbsp; Turn pages, embeddable content, photos,<em><b><span style="color: #ff0000;"> styled text</em></b></span> &nbsp;, even a <span style="color: #0000ee;">Music Player</span> on page two.<p>Fork this, Customize it, Add your own music player or whatever...</p></h3><p></p> </div><!-- .content --> </div><!-- .side-1 --> <div class='side-2' id='p2'> <div class='content'> <div align="center"><h2>Music Player</h2></div> <!-- Forked and Modified by Stan Williams http://stans-songs.com and http://stanwilliamsmusic.com http://stanwilliams.net Fork this at https://codepen.io/Stanssongs/pen/yxLCh and Add your own content or whatever... ---> <p><h3> <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player?url=https%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F12160617&color=000000&auto_play=false&show_artwork=true"></iframe></p> </p></h3> <p><span style="color: #000000;">
Free Downloads see below: &nbsp; &nbsp; Stan Williams , Acoustic, electric and bass guitars, featuring Steve Grisham (Outlaws band guitarist ) on Mandolin and Pug Baker (Ghost Riders) on Drums. recorded at Mira Vista Studios &nbsp; &nbsp;<a href="http://www.myspace.com/miravistastudios" target="_blank"> Mira Vista Studios</a><p>Download this music free.</p>
Music Copyright © 2007 Stan Williams all rights reserved, &nbsp;except for the song Last Trail by: Stan Williams: http://www.stanwilliamsmusic.com and is licensed under http://creativecommons.org/licenses/by-nc-nd/3.0/
Attribution - NonCommercial - NoDerivatives
Download Last Trail.MP3 free here: <a href="https://soundcloud.com/stanwmusic/lasttrail-mp3" target="_blank"> Soundcloud.com</a><p></p>Download the .ogg file free here:
<a href="https://archive.org/details/StanWilliamsLastTrail" target="_blank"> Archive.org Last Trail .ogg </a> </p> </div><!-- .content --> </div><!-- .side-2 --> </div><!-- .page --> <div id='page-2' class='page no-anim'> <div class='side-1' id='p3'> <div class='content'> <div align="center"><span style="color: #dd0000;"><h2> Red Title Text</h2></span></div> <p>
Aenean eget magna eget sem lacinia bibendum non at dui. Donec fringilla quam pulvinar accumsan commodo. Maecenas ac dolor laoreet, dictum diam nec, egestas libero. Aliquam pretium nisi mi, quis dictum sem venenatis in. Nam rhoncus, nisl a volutpat egestas, metus mauris placerat ligula, tempus viverra diam justo sit amet dui. Phasellus neque urna, mattis in porta in, vulputate a tortor. </p> <p>Vestibulum ornare odio. Proin egestas non orci a interdum. Sed et tempor turpis, a rutrum arcu. Vestibulum laoreet dictum gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed suscipit turpis posuere nulla convallis volutpat. </p> </div><!-- .content --> </div><!-- .side-1 --> <div class='side-2' id='p4'> <div class='content'> <span style="color: #cc33cc;"><div align="center"><h2>Chapter 4:</h2></div> The Hounds of Hackerville ate my homework!<p></p></span><span style="color: #000000;" <p><b> Aenean eget magna eget sem lacinia bibendum non at dui. Donec fringilla quam pulvinar accumsan commodo. Maecenas ac dolor laoreet, dictum diam nec, egestas libero. Aliquam pretium nisi mi, quis dictum sem venenatis in. Nam rhoncus, nisl a volutpat egestas. </p></span> <p>
Vulputate a tortor. Phasellus in felis non lectus lacinia imperdiet eu vitae augue. Sed ultrices dictum auctor. Proin ac blandit leo, quis iaculis tortor. Suspendisse tortor urna, elementum sit amet urna et, sagittis dictum mi. Praesent blandit nibh quis dapibus eleifen, dang hounds! </b></p> </div><!-- .content --> </div><!-- .side-2 --> </div><!-- #page-2 --> <div id='page-3' class='page no-anim'> <div class='side-1' id='p5'> <div class='content'> <div align="center"><h2> <span style="color: #ee0000;">Rev it Up!</h2></span></div> <p> <img src="http://upload.wikimedia.org/wikipedia/commons/5/59/Animated_Aston_Martin_Speedometer.gif" alt="Rev it Up!" width="350" height="350" class="aligncenter" /> </p> <p> The image file above is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license.<p></p>Attribution:&nbsp;<a href="http://en.wikipedia.org/wiki/User:DineshAdv" target="_blank"> DineshAdv</a> at &nbsp;<a href="http://commons.wikimedia.org/wiki/File:Animated_Aston_Martin_Speedometer.gif" target="_blank"> en.wikipedia</a>. </p> </div><!-- .content --> </div><!-- .side-1 --> <div class='side-2' id='p6'> <div class='content'> <div align="center"><h2> Here's a cat.</h2></div> <p> <div align="center"><img alt="Meeeow" src="http://placekitten.com/175/175?image=3" width="175" height="175" border="2" /></p><a href="http://en.wikipedia.org/wiki/Cat" target="_blank">Cat</a></p> </div> The domestic cat (Felis catus or Felis silvestris catus) is a small, usually furry, domesticated, and carnivorous mammal. It is often called the housecat when kept as an indoor pet, or simply the cat when there is no need to distinguish it from other felids and felines. Cats are often valued by humans for companionship and their ability to hunt vermin and household pests.
Cats are similar in anatomy to the other felids, with strong, flexible bodies, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals. They can see in near darkness. Like most other mammals, cats have poorer color vision and a better sense of smell than humans. </p> <p>
Despite being solitary hunters, cats are a social species, and cat communication includes the use of a variety of vocalizations (mewing, purring, trilling, hissing, growling and grunting) as well as cat pheromones and types of cat-specific body language... </p> </div><!-- .content --> </div><!-- .side-2 --> </div><!-- #page-3 --> <div id='page-4' class='page no-anim'> <div class='side-1' id='p7'> <div class='content'> <div align="center"><h2>License</h2>Fork me at &nbsp;https://codepen.io/Stanssongs/pen/wqahE </div> <p> <hr><p></p> Copyright (c) 2014 by Stan Williams (https://codepen.io/Stanssongs/pen/sldCv)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. </div><!-- .content --> </div><!-- .side-1 --> <div class='side-2' id='p8'> <div class='content'><p><div align="center"><img alt="Meeeow" src="http://placekitten.com/150/150?image=3" width="75%" height="50" border="2" /></p><hr><p>&nbsp;</p> <div align="center"><h2>Last Page</h2></div> <p>&nbsp;</p><p> <div align="center"> <h4>That's all Folks ...</h4></div><p>&nbsp;</p><hr> <p> </p> </div><!-- .content --> </div><!-- .side-2 --> </div><!-- #page-4 -->
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D Book - Script Codes CSS Codes

*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; position: relative; }
html, body { height: 100%; }
::-webkit-scrollbar {width:12px}
::-webkit-scrollbar-thumb {background: #222;}
::-webkit-scrollbar-track {background: transparent}
::selection { background: #222; color: white; }
::-moz-selection { background: #222; color: white; }
body * { transform-style: preserve-3d; /* am i doing this wrong? */ }
body { background-image: linear-gradient( hsl(240,20%,20%), hsl(30,30%,40%) ); color: #222; font-family: 'Gabriela', serif; perspective: 70em;/*in your face*/ }
h1, p { margin: 5% 0; }
.book { height: 80%; max-height: 640px; min-height: 300px; width: 900px; background-image: linear-gradient( 90deg, hsla(30,40%,50%,.6), hsla(30,40%,20%,.9), hsla(30,40%,50%,.4) 90% ), url(''); position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; border: 10px solid hsla(30,10%,30%,1); border-radius: 5px; box-shadow: 0 0 150px hsla(170,0%,0%,.4); }
.page { height: 100%; width: 50%; border-right: 10px solid transparent; position: absolute; top: 0; right: 0; transform-origin: 0 50%; transition: .6s; /*animation: unflip .3s linear;*/ } [class*='side'] { height: 100%; width: 100%; position: absolute; background-color:#dddddd; background-image: url(''); background-size: 100% 100%; backface-visibility: hidden; overflow: auto; padding: 5% 8%; } .side-1 { z-index: 2; box-shadow: inset 50px 0 50px rgba(0,0,0,.5); transition: .5s; } .side-2 { background-color: #dedede; transform: rotateY(180deg); box-shadow: inset -50px 0 50px rgba(0,0,0,.5); } .flipped > .side-1 { box-shadow: inset 300px 0 50px rgba(0,0,0,.8); transition: .6s; } .flipped > [class*='side'] { pointer-events: auto; }
.page:after { width: 100px; height: 50px; background-color: #555; position: absolute; top: 0; bottom: 0; right: -100px; margin: auto; color: white; text-shadow: 0 -1px 0 #222; line-height: 50px; text-align: center; font-family: monospace; content: 'next-page'; animation: hide .8s linear; } .page.flipped:after { content: 'prev-page'; transform: rotateY(180deg); pointer-events: auto; } /* to hide on flip animation */ @keyframes hide { 0% {opacity: 0;} 85% {opacity: 0;} 100% {opacity: 1;} }
/* first-top last-bottom stack order */
#page-1 { z-index: 4; }
#page-2 { z-index: 3; }
#page-3 { z-index: 2; }
#page-4 { z-index: 1; }
.flipped { transform: rotateY(-180deg); pointer-events: none; /*animation: flip .3s linear; animation-fill-mode: forwards;*/ } /* reverse z-stack order */ #page-1.flipped { z-index: 1; } #page-2.flipped { z-index: 2; } #page-5.flipped { z-index: 3; } #page-4.flipped { z-index: 4; }
.no-anim, .no-anim:after { animation:none;/* disable animation when page loads */ }
@keyframes flip { to { transform: rotateY(-180deg); } }
@keyframes unflip { from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } }

3D Book - Script Codes JS Codes

$('.page').click(function() { $(this).removeClass('no-anim').toggleClass('flipped'); $('.page > div').click(function(e) { e.stopPropagation(); });
});
3D Book - Script Codes
3D Book - Script Codes
Home Page Home
Developer Stan Williams
Username Stanssongs
Uploaded September 08, 2022
Rating 3
Size 7,405 Kb
Views 28,336
Do you need developer help for 3D Book?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Stan Williams (Stanssongs) Script Codes
Name
CSS social buttons and icons
CSS only simple parallax scroll
Mouse Position Background Focus Effect
Horizontal Menu Demo
Record Player with CSS3 Anims and HTML5 Audio
Blog Page
Cursor following menu demo
Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar
3D Hover Effect for Images
Background Image Slideshow Menu
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!