Skip to content

Instantly share code, notes, and snippets.

@thinkphp

thinkphp/turn-the-page.html

Last active November 16, 2024 11:57
Show Gist options
  • Save thinkphp/6d68b2113a947e6d9f1ecf6900543f32 to your computer and use it in GitHub Desktop.
Save thinkphp/6d68b2113a947e6d9f1ecf6900543f32 to your computer and use it in GitHub Desktop.
Download ZIP
Turn Page 3D CSS HTML JS
Raw
turn-the-page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Portfolio - 3 Pages</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(45deg, #1a1a1a, #4a4a4a);
font-family: Arial, sans-serif;
perspective: 3000px;
}
.book {
position: relative;
width: 800px;
height: 500px;
transform-style: preserve-3d;
transform: rotateX(10deg);
}
.page {
position: absolute;
width: 100%;
height: 100%;
transform-origin: left;
transform-style: preserve-3d;
transition: transform 1.5s cubic-bezier(0.645, 0.045, 0.355, 1);
background: white;
transform: rotateY(0deg);
}
.page-content {
position: absolute;
width: 100%;
height: 100%;
padding: 2rem;
backface-visibility: hidden;
background: white;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.page-back {
transform: rotateY(180deg);
}
/* Specific z-index for each page */
#page1 { z-index: 3; }
#page2 { z-index: 2; }
#page3 { z-index: 1; }
.flipped {
transform: rotateY(-180deg);
}
.navigation {
position: fixed;
bottom: 2rem;
display: flex;
gap: 1rem;
z-index: 1000;
}
button {
padding: 0.8rem 1.5rem;
border: none;
background: white;
cursor: pointer;
border-radius: 4px;
font-size: 1rem;
transition: all 0.3s;
}
button:hover {
background: #eee;
transform: translateY(-2px);
}
button:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
/* Content Styling */
h1 {
color: #333;
margin-bottom: 1.5rem;
font-size: 2rem;
}
.content-section {
margin-bottom: 2rem;
}
img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1rem;
}
.page-number {
position: absolute;
bottom: 1rem;
right: 1rem;
font-size: 1rem;
color: #666;
}
.skills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.skill {
background: #f0f0f0;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="book">
<div class="page" id="page1">
<div class="page-content">
<h1>Welcome to My Portfolio</h1>
<div class="content-section">
<img src="/api/placeholder/700/300" alt="Profile">
<h2>About Me</h2>
<p>I'm a passionate web developer creating amazing digital experiences.</p>
<div class="skills">
<span class="skill">HTML5</span>
<span class="skill">CSS3</span>
<span class="skill">JavaScript</span>
</div>
</div>
<div class="page-number">1</div>
</div>
<div class="page-content page-back">
<h1>My Projects</h1>
<div class="content-section">
<img src="/api/placeholder/700/300" alt="Project 1">
<h2>Project One</h2>
<p>An innovative web application showcasing modern technologies.</p>
</div>
<div class="page-number">2</div>
</div>
</div>
<div class="page" id="page2">
<div class="page-content">
<h1>Experience</h1>
<div class="content-section">
<h2>Senior Web Developer</h2>
<p>Leading development of high-impact web projects.</p>
<div class="skills">
<span class="skill">Team Leadership</span>
<span class="skill">Project Management</span>
</div>
</div>
<div class="page-number">3</div>
</div>
<div class="page-content page-back">
<h1>Education</h1>
<div class="content-section">
<h2>Computer Science</h2>
<p>Bachelor's Degree in Computer Science</p>
<p>Relevant Coursework: Web Development, Algorithms, Data Structures</p>
</div>
<div class="page-number">4</div>
</div>
</div>
<div class="page" id="page3">
<div class="page-content">
<h1>Contact Me</h1>
<div class="content-section">
<h2>Get in Touch</h2>
<p>Email: [email protected]</p>
<p>LinkedIn: linkedin.com/in/yourprofile</p>
<p>GitHub: github.com/youruser</p>
</div>
<div class="page-number">5</div>
</div>
<div class="page-content page-back">
<h1>Thank You</h1>
<div class="content-section">
<h2>Let's Work Together</h2>
<p>Thank you for viewing my portfolio. I look forward to discussing potential opportunities.</p>
</div>
<div class="page-number">6</div>
</div>
</div>
</div>
<div class="navigation">
<button onclick="previousPage()" id="prevBtn">Previous</button>
<button onclick="nextPage()" id="nextBtn">Next</button>
</div>
<script>
const pages = document.querySelectorAll('.page');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentPage = 0;
let isAnimating = false;
function updateButtons() {
prevBtn.disabled = currentPage === 0;
nextBtn.disabled = currentPage === pages.length;
}
function updatePages() {
if (isAnimating) return;
isAnimating = true;
pages.forEach((page, index) => {
if (index < currentPage) {
page.classList.add('flipped');
page.style.zIndex = index;
} else {
page.classList.remove('flipped');
page.style.zIndex = pages.length - index;
}
});
setTimeout(() => {
isAnimating = false;
}, 1500);
updateButtons();
}
function nextPage() {
if (!isAnimating && currentPage < pages.length) {
currentPage++;
updatePages();
}
}
function previousPage() {
if (!isAnimating && currentPage > 0) {
currentPage--;
updatePages();
}
}
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') {
nextPage();
} else if (e.key === 'ArrowLeft') {
previousPage();
}
});
// Initialize button states
updateButtons();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment