3D Bookshelf

Developer
Chris Coyier
Size
3,081 Kb
Views
12,144
  1. 3D Bookshelf Previews
  2. 3D Bookshelf HTML Codes
  3. 3D Bookshelf CSS Codes

How do I make an 3d bookshelf?

Covers from: http://www.nytimes.com/slideshow/2012/12/19/books/20favorite-book-covers-10.htmlWood texture from:. What is a 3d bookshelf? How do you make a 3d bookshelf? This script and codes were developed by Chris Coyier on 29 January 2023, Sunday.

3D Bookshelf Previews
IQ Test

3D Bookshelf - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Bookshelf</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="books"> <img src="https://graphics8.nytimes.com/images/2012/12/19/books/20favorite-book-covers-slide-ORTM/20favorite-book-covers-slide-ORTM-slide.jpg"> <img src="https://graphics8.nytimes.com/images/2012/12/19/books/20favorite-book-covers-slide-DQPY/20favorite-book-covers-slide-DQPY-slide.jpg"> <img src="https://graphics8.nytimes.com/images/2012/12/19/books/20favorite-book-covers-slide-QNUF/20favorite-book-covers-slide-QNUF-slide.jpg"> <img src="https://graphics8.nytimes.com/images/2012/12/19/books/20favorite-book-covers-slide-U60O/20favorite-book-covers-slide-U60O-slide.jpg"> <div class="shelf"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

3D Bookshelf - Script Codes CSS Codes

.books { padding: 30px 0; text-align: center;
}
.books img { display: inline-block; position: relative; z-index: 1; width: 100px; margin: 0 10px; -moz-transform: perspective(500px) rotateY(22deg); -ms-transform: perspective(500px) rotateY(22deg); -webkit-transform: perspective(500px) rotateY(22deg); transform: perspective(500px) rotateY(22deg); -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; box-shadow: -2px 0 -1px black, -4px 0 -2px black, -6px 0 -3px black, -8px 0 -4px black, -10px 0 -5px black;
}
.books img:hover { -moz-transform: perspective(500px) rotateY(0deg); -ms-transform: perspective(500px) rotateY(0deg); -webkit-transform: perspective(500px) rotateY(0deg); transform: perspective(500px) rotateY(0deg); box-shadow: none;
}
.shelf { height: 100px; margin: -50px auto 0; -moz-transform: perspective(10px) rotateX(20deg); -ms-transform: perspective(10px) rotateX(20deg); -webkit-transform: perspective(10px) rotateX(20deg); transform: perspective(10px) rotateX(20deg); background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/[email protected]); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(100%, rgba(0, 0, 0, 0))), url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/[email protected]); background: -moz-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/[email protected]); background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/[email protected]); background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/[email protected]); background-size: 100%, 512px;
}
body { background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/[email protected]); background-size: 512px; overflow: hidden;
}
3D Bookshelf - Script Codes
3D Bookshelf - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded January 29, 2023
Rating 4
Size 3,081 Kb
Views 12,144
Do you need developer help for 3D Bookshelf?

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!

Chris Coyier (chriscoyier) Script Codes
Name
Simple Flexbox Responsive Nav
Automatic Table of Contents
Slider like Yahoo Weather App
Glowing Blue Inputs
Bar Navigation with Flexbox and SVG icons
Basic Example of SVG Line Drawing, Backward and Forward
Infinite Slideshow
SVG Filters on HTML5 Video
Airtable Emoji Poll
Search Box in Content Moves to Fixed Header
Create amazing blog posts 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!