Last active
November 16, 2024 11:57
-
-
Save thinkphp/6d68b2113a947e6d9f1ecf6900543f32 to your computer and use it in GitHub Desktop.
Turn Page 3D CSS HTML JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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