Perspective Flipbook

Developer
Joost Jansen
Size
3,627 Kb
Views
8,096
  1. Perspective Flipbook Previews
  2. Perspective Flipbook HTML Codes
  3. Perspective Flipbook CSS Codes
  4. Perspective Flipbook JS Codes

How do I make an perspective flipbook?

The first time I'm playing with css perspective and transform types :D The divs seem to be assigned an incorrect z-index value when transform-type: preserve-3d is used. There is a comment in the css code that explains the solution.. What is a perspective flipbook? How do you make a perspective flipbook? This script and codes were developed by Joost Jansen on 19 November 2022, Saturday.

Perspective Flipbook Previews
IQ Test

Perspective Flipbook - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Perspective Flipbook</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>
<button id="nextFlip">Next</button>
<button id="prevFlip">Prev</button>
<div id="flipbook"> <div class="flip"> <p>Employee #4</p><img src="https://placehold.it/200x200"/> </div> <div class="flip"> <p>Employee #3</p><img src="https://placehold.it/200x200"/> </div> <div class="flip"> <p>Employee #2</p><img src="https://placehold.it/200x200"/> </div> <div class="flip"> <h2>Awesome Flipbook</h2> </div> <h2>The end</h2>
</div> <script src="js/index.js"></script>
</body>
</html>

Perspective Flipbook - Script Codes CSS Codes

html,
body { height: 100%; width: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
button { position: absolute; padding: 10px 15px; border: 0; box-shadow: 0 5px 20px -10px rgba(0,0,0,0.5); -webkit-transition: all 200ms ease; transition: all 200ms ease;
}
button#nextFlip { left: 20px; top: 45%;
}
button#prevFlip { top: 45%; right: 20px;
}
button:hover { box-shadow: 0 15px 30px -10px rgba(0,0,0,0.3); -webkit-transform: translateY(-10px); transform: translateY(-10px);
}
#flipbook { height: 400px; width: 400px; margin: 0 auto; -webkit-perspective: 1000px; perspective: 1000px; background-color: #aaa; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
#flipbook .flip { height: 400px; width: 400px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 1; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transition: all 300ms ease; transition: all 300ms ease; background: #bba;
}
#flipbook .flip:nth-child(1) { background-color: #eee;
}
#flipbook .flip:nth-child(2) { background-color: #edd;
}
#flipbook .flip:nth-child(3) { background-color: #ddc;
}
#flipbook .flip:nth-child(4) { background-color: #ccb;
}
@-webkit-keyframes flip { 50% { -webkit-transform: none; transform: none; }
}
@keyframes flip { 50% { -webkit-transform: none; transform: none; }
}

Perspective Flipbook - Script Codes JS Codes

var buttons = document.querySelectorAll("button"),	flips = document.querySelectorAll(".flip"),	inc = 0;
function flip(direction)
{	if (direction === "next")	{	flips.forEach(function(flip, i) {	flip.style.transform = "rotateX(" + (i * 75 + inc) + "deg)";	});	inc += 75;	}	else if (direction === "prev")	{	flips.forEach(function(flip, i) {	flip.style.transform = "rotateX(" + (i * 75 + inc) + "deg)";	});	inc -= 75;	};
}
buttons.forEach(function(button, i) {	var d = (i === 0) ? "next" : "prev";	button.addEventListener("click", function() {	flip(d);	});
});
/**	#TODO	1. limit rotation value	2. set constant values for degrees between each flip
*/
Perspective Flipbook - Script Codes
Perspective Flipbook - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 3
Size 3,627 Kb
Views 8,096
Do you need developer help for Perspective Flipbook?

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!

Joost Jansen (DevItWithDavid) Script Codes
Name
React Close Dialog with Animation
CSGO image overlay using clip path
JQuery Image Slider
DevWars Objectives Template
React CSSTransitionGroup
Flexbox is AWESOME
Flexbox Layout - One page website
Overwatch cards, three styles
Star Wars Battlefront I 2016 Interface
Material ripple effect with pure CSS and JS
Create amazing marketing copy 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!