We use cookies to enhance your experience on the site
Main Project - Animated 3D Portfolio Gallery
In this project, we'll create a spectacular 3D gallery using only HTML and CSS. The gallery will include advanced @keyframes animations, 3D transformations, hover effects, and automatic slideshows. The project demonstrates all CSS animation techniques from this module without using JavaScript.
Project description
Our 3D gallery will include:
- 3D Carousel - a rotating cube with images
- Animated project cards - with hover effects and transformations
- Automatic slideshow - using only CSS
- Particle effects - animated background and decorations
- Animated navigation menu - with transition effects
- Loading screen - with advanced animations
Complete project code
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Animated 3D Portfolio Gallery</title>
7 <style>
8 /* Reset and variables */
9 * {
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13 }
14
15 :root {
16 --primary-color: #6c5ce7;
17 --secondary-color: #a29bfe;
18 --accent-color: #fd79a8;
19 --dark-color: #2d3436;
20 --light-color: #dfe6e9;
21 --animation-duration: 20s;
22 }
23
24 body {
25 font-family: 'Arial', sans-serif;
26 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
27 min-height: 100vh;
28 overflow-x: hidden;
29 perspective: 1000px;
30 }
31
32 /* Animated background */
33 @keyframes gradientShift {
34 0%, 100% { background-position: 0% 50%; }
35 50% { background-position: 100% 50%; }
36 }
37
38 body {
39 background-size: 200% 200%;
40 animation: gradientShift 15s ease infinite;
41 }
42
43 /* Loading Screen */
44 .loading-screen {
45 position: fixed;
46 top: 0;
47 left: 0;
48 width: 100%;
49 height: 100%;
50 background: #2d3436;
51 display: flex;
52 justify-content: center;
53 align-items: center;
54 z-index: 9999;
55 animation: hideLoading 3s ease-out forwards;
56 animation-delay: 2s;
57 }
58
59 @keyframes hideLoading {
60 to {
61 opacity: 0;
62 pointer-events: none;
63 }
64 }
65
66 .loader {
67 width: 100px;
68 height: 100px;
69 position: relative;
70 }
71
72 .loader-circle {
73 position: absolute;
74 width: 100%;
75 height: 100%;
76 border: 4px solid transparent;
77 border-top-color: var(--primary-color);
78 border-radius: 50%;
79 animation: rotate 1s linear infinite;
80 }
81
82 .loader-circle:nth-child(2) {
83 width: 80%;
84 height: 80%;
85 top: 10%;
86 left: 10%;
87 border-top-color: var(--secondary-color);
88 animation-duration: 0.8s;
89 animation-direction: reverse;
90 }
91
92 .loader-circle:nth-child(3) {
93 width: 60%;
94 height: 60%;
95 top: 20%;
96 left: 20%;
97 border-top-color: var(--accent-color);
98 animation-duration: 0.6s;
99 }
100
101 @keyframes rotate {
102 to { transform: rotate(360deg); }
103 }
104
105 /* Navigation */
106 .navbar {
107 position: fixed;
108 top: 0;
109 width: 100%;
110 background: rgba(45, 52, 54, 0.9);
111 backdrop-filter: blur(10px);
112 padding: 1rem 2rem;
113 z-index: 1000;
114 animation: slideDown 0.8s ease-out;
115 }
116
117 @keyframes slideDown {
118 from {
119 transform: translateY(-100%);
120 opacity: 0;
121 }
122 to {
123 transform: translateY(0);
124 opacity: 1;
125 }
126 }
127
128 .nav-container {
129 max-width: 1200px;
130 margin: 0 auto;
131 display: flex;
132 justify-content: space-between;
133 align-items: center;
134 }
135
136 .logo {
137 font-size: 2rem;
138 font-weight: bold;
139 color: white;
140 animation: logoGlow 3s ease-in-out infinite;
141 }
142
143 @keyframes logoGlow {
144 0%, 100% {
145 text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
146 }
147 50% {
148 text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
149 0 0 30px var(--accent-color);
150 }
151 }
152
153 .nav-links {
154 display: flex;
155 gap: 2rem;
156 list-style: none;
157 }
158
159 .nav-link {
160 color: white;
161 text-decoration: none;
162 position: relative;
163 transition: color 0.3s ease;
164 }
165
166 .nav-link::after {
167 content: '';
168 position: absolute;
169 bottom: -5px;
170 left: 0;
171 width: 0;
172 height: 2px;
173 background: var(--accent-color);
174 transition: width 0.3s ease;
175 }
176
177 .nav-link:hover::after {
178 width: 100%;
179 }
180
181 /* Hero Section with 3D Cube */
182 .hero {
183 height: 100vh;
184 display: flex;
185 justify-content: center;
186 align-items: center;
187 position: relative;
188 margin-top: -60px;
189 }
190
191 .cube-container {
192 width: 300px;
193 height: 300px;
194 position: relative;
195 transform-style: preserve-3d;
196 animation: rotateCube var(--animation-duration) linear infinite;
197 }
198
199 @keyframes rotateCube {
200 0% { transform: rotateX(0) rotateY(0); }
201 100% { transform: rotateX(360deg) rotateY(360deg); }
202 }
203
204 .cube-face {
205 position: absolute;
206 width: 300px;
207 height: 300px;
208 background: rgba(255, 255, 255, 0.1);
209 backdrop-filter: blur(10px);
210 border: 2px solid rgba(255, 255, 255, 0.2);
211 display: flex;
212 justify-content: center;
213 align-items: center;
214 font-size: 3rem;
215 color: white;
216 }
217
218 .cube-face::before {
219 content: '';
220 position: absolute;
221 inset: 0;
222 background: linear-gradient(135deg,
223 transparent 0%,
224 var(--primary-color) 50%,
225 transparent 100%);
226 opacity: 0;
227 animation: shimmer 3s ease-in-out infinite;
228 }
229
230 @keyframes shimmer {
231 0%, 100% { opacity: 0; }
232 50% { opacity: 0.5; }
233 }
234
235 .front { transform: translateZ(150px); }
236 .back { transform: rotateY(180deg) translateZ(150px); }
237 .left { transform: rotateY(-90deg) translateZ(150px); }
238 .right { transform: rotateY(90deg) translateZ(150px); }
239 .top { transform: rotateX(90deg) translateZ(150px); }
240 .bottom { transform: rotateX(-90deg) translateZ(150px); }
241
242 /* Animated particles */
243 .particles {
244 position: fixed;
245 top: 0;
246 left: 0;
247 width: 100%;
248 height: 100%;
249 pointer-events: none;
250 overflow: hidden;
251 }
252
253 .particle {
254 position: absolute;
255 width: 4px;
256 height: 4px;
257 background: white;
258 border-radius: 50%;
259 animation: float linear infinite;
260 }
261
262 @keyframes float {
263 from {
264 transform: translateY(100vh) rotate(0deg);
265 opacity: 0;
266 }
267 10% {
268 opacity: 1;
269 }
270 90% {
271 opacity: 1;
272 }
273 to {
274 transform: translateY(-100vh) rotate(360deg);
275 opacity: 0;
276 }
277 }
278
279 .particle:nth-child(1) { left: 10%; animation-duration: 15s; animation-delay: 0s; }
280 .particle:nth-child(2) { left: 20%; animation-duration: 20s; animation-delay: 2s; }
281 .particle:nth-child(3) { left: 30%; animation-duration: 18s; animation-delay: 4s; }
282 .particle:nth-child(4) { left: 40%; animation-duration: 22s; animation-delay: 1s; }
283 .particle:nth-child(5) { left: 50%; animation-duration: 16s; animation-delay: 3s; }
284 .particle:nth-child(6) { left: 60%; animation-duration: 19s; animation-delay: 5s; }
285 .particle:nth-child(7) { left: 70%; animation-duration: 21s; animation-delay: 2s; }
286 .particle:nth-child(8) { left: 80%; animation-duration: 17s; animation-delay: 4s; }
287 .particle:nth-child(9) { left: 90%; animation-duration: 23s; animation-delay: 1s; }
288 .particle:nth-child(10) { left: 95%; animation-duration: 14s; animation-delay: 6s; }
289
290 /* Project gallery */
291 .gallery {
292 padding: 100px 2rem;
293 max-width: 1200px;
294 margin: 0 auto;
295 }
296
297 .gallery-title {
298 text-align: center;
299 font-size: 3rem;
300 color: white;
301 margin-bottom: 3rem;
302 animation: fadeInUp 1s ease-out;
303 }
304
305 @keyframes fadeInUp {
306 from {
307 opacity: 0;
308 transform: translateY(30px);
309 }
310 to {
311 opacity: 1;
312 transform: translateY(0);
313 }
314 }
315
316 .projects-grid {
317 display: grid;
318 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
319 gap: 2rem;
320 }
321
322 .project-card {
323 background: rgba(255, 255, 255, 0.1);
324 backdrop-filter: blur(10px);
325 border-radius: 15px;
326 overflow: hidden;
327 position: relative;
328 height: 400px;
329 transform-style: preserve-3d;
330 transition: transform 0.6s ease;
331 animation: cardAppear 0.8s ease-out backwards;
332 }
333
334 .project-card:nth-child(1) { animation-delay: 0.1s; }
335 .project-card:nth-child(2) { animation-delay: 0.2s; }
336 .project-card:nth-child(3) { animation-delay: 0.3s; }
337 .project-card:nth-child(4) { animation-delay: 0.4s; }
338 .project-card:nth-child(5) { animation-delay: 0.5s; }
339 .project-card:nth-child(6) { animation-delay: 0.6s; }
340
341 @keyframes cardAppear {
342 from {
343 opacity: 0;
344 transform: rotateY(90deg) scale(0.8);
345 }
346 to {
347 opacity: 1;
348 transform: rotateY(0) scale(1);
349 }
350 }
351
352 .project-card:hover {
353 transform: translateY(-10px) rotateX(5deg);
354 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
355 }
356
357 .project-image {
358 width: 100%;
359 height: 60%;
360 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
361 position: relative;
362 overflow: hidden;
363 }
364
365 .project-image::before {
366 content: '';
367 position: absolute;
368 top: 50%;
369 left: 50%;
370 transform: translate(-50%, -50%);
371 font-size: 4rem;
372 opacity: 0.5;
373 }
374
375 .project-wave {
376 position: absolute;
377 bottom: -50%;
378 left: -50%;
379 width: 200%;
380 height: 200%;
381 background: rgba(255, 255, 255, 0.1);
382 border-radius: 40%;
383 animation: wave 10s linear infinite;
384 }
385
386 @keyframes wave {
387 from { transform: rotate(0deg); }
388 to { transform: rotate(360deg); }
389 }
390
391 .project-content {
392 padding: 1.5rem;
393 color: white;
394 }
395
396 .project-title {
397 font-size: 1.5rem;
398 margin-bottom: 0.5rem;
399 }
400
401 .project-description {
402 opacity: 0.8;
403 line-height: 1.6;
404 }
405
406 /* Automatic slider */
407 .slider {
408 width: 100%;
409 height: 500px;
410 margin: 100px auto;
411 overflow: hidden;
412 position: relative;
413 background: rgba(255, 255, 255, 0.05);
414 border-radius: 20px;
415 }
416
417 .slider-wrapper {
418 display: flex;
419 animation: slide 15s ease-in-out infinite;
420 }
421
422 @keyframes slide {
423 0%, 20% { transform: translateX(0); }
424 25%, 45% { transform: translateX(-100%); }
425 50%, 70% { transform: translateX(-200%); }
426 75%, 95% { transform: translateX(-300%); }
427 100% { transform: translateX(0); }
428 }
429
430 .slide {
431 min-width: 100%;
432 height: 500px;
433 display: flex;
434 align-items: center;
435 justify-content: center;
436 font-size: 3rem;
437 color: white;
438 position: relative;
439 }
440
441 .slide:nth-child(1) { background: linear-gradient(135deg, #667eea, #764ba2); }
442 .slide:nth-child(2) { background: linear-gradient(135deg, #f093fb, #f5576c); }
443 .slide:nth-child(3) { background: linear-gradient(135deg, #4facfe, #00f2fe); }
444 .slide:nth-child(4) { background: linear-gradient(135deg, #fa709a, #fee140); }
445
446 .slide-content {
447 text-align: center;
448 animation: slideContent 15s ease-in-out infinite;
449 }
450
451 @keyframes slideContent {
452 0%, 20% { opacity: 1; transform: scale(1); }
453 22%, 25% { opacity: 0; transform: scale(0.8); }
454 25%, 45% { opacity: 1; transform: scale(1); }
455 47%, 50% { opacity: 0; transform: scale(0.8); }
456 50%, 70% { opacity: 1; transform: scale(1); }
457 72%, 75% { opacity: 0; transform: scale(0.8); }
458 75%, 95% { opacity: 1; transform: scale(1); }
459 97%, 100% { opacity: 0; transform: scale(0.8); }
460 }
461
462 /* Slide indicators */
463 .slider-indicators {
464 position: absolute;
465 bottom: 20px;
466 left: 50%;
467 transform: translateX(-50%);
468 display: flex;
469 gap: 10px;
470 }
471
472 .indicator {
473 width: 50px;
474 height: 4px;
475 background: rgba(255, 255, 255, 0.3);
476 position: relative;
477 overflow: hidden;
478 }
479
480 .indicator::before {
481 content: '';
482 position: absolute;
483 top: 0;
484 left: -100%;
485 width: 100%;
486 height: 100%;
487 background: white;
488 animation: indicatorFill 15s ease-in-out infinite;
489 }
490
491 .indicator:nth-child(1)::before { animation-delay: 0s; }
492 .indicator:nth-child(2)::before { animation-delay: 3.75s; }
493 .indicator:nth-child(3)::before { animation-delay: 7.5s; }
494 .indicator:nth-child(4)::before { animation-delay: 11.25s; }
495
496 @keyframes indicatorFill {
497 0% { left: -100%; }
498 25% { left: 0; }
499 26%, 100% { left: 100%; }
500 }
501
502 /* Skills section with animations */
503 .skills {
504 padding: 100px 2rem;
505 max-width: 1200px;
506 margin: 0 auto;
507 }
508
509 .skills-title {
510 text-align: center;
511 font-size: 3rem;
512 color: white;
513 margin-bottom: 3rem;
514 }
515
516 .skill-item {
517 margin-bottom: 2rem;
518 opacity: 0;
519 animation: skillAppear 0.8s ease-out forwards;
520 }
521
522 .skill-item:nth-child(1) { animation-delay: 0.2s; }
523 .skill-item:nth-child(2) { animation-delay: 0.4s; }
524 .skill-item:nth-child(3) { animation-delay: 0.6s; }
525 .skill-item:nth-child(4) { animation-delay: 0.8s; }
526
527 @keyframes skillAppear {
528 from {
529 opacity: 0;
530 transform: translateX(-50px);
531 }
532 to {
533 opacity: 1;
534 transform: translateX(0);
535 }
536 }
537
538 .skill-name {
539 color: white;
540 margin-bottom: 0.5rem;
541 }
542
543 .skill-bar {
544 width: 100%;
545 height: 20px;
546 background: rgba(255, 255, 255, 0.1);
547 border-radius: 10px;
548 overflow: hidden;
549 }
550
551 .skill-progress {
552 height: 100%;
553 background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
554 border-radius: 10px;
555 animation: fillBar 2s ease-out forwards;
556 animation-delay: 1s;
557 transform-origin: left;
558 transform: scaleX(0);
559 }
560
561 @keyframes fillBar {
562 to { transform: scaleX(1); }
563 }
564
565 .skill-item:nth-child(1) .skill-progress { width: 90%; }
566 .skill-item:nth-child(2) .skill-progress { width: 85%; }
567 .skill-item:nth-child(3) .skill-progress { width: 95%; }
568 .skill-item:nth-child(4) .skill-progress { width: 80%; }
569
570 /* Footer with animation */
571 .footer {
572 padding: 50px 2rem;
573 text-align: center;
574 color: white;
575 position: relative;
576 overflow: hidden;
577 }
578
579 .footer::before {
580 content: '';
581 position: absolute;
582 top: 0;
583 left: -100%;
584 width: 100%;
585 height: 2px;
586 background: linear-gradient(90deg,
587 transparent,
588 var(--accent-color),
589 transparent);
590 animation: footerLine 3s linear infinite;
591 }
592
593 @keyframes footerLine {
594 to { left: 100%; }
595 }
596
597 /* Responsiveness */
598 @media (max-width: 768px) {
599 .cube-container {
600 width: 200px;
601 height: 200px;
602 }
603
604 .cube-face {
605 width: 200px;
606 height: 200px;
607 font-size: 2rem;
608 }
609
610 .front { transform: translateZ(100px); }
611 .back { transform: rotateY(180deg) translateZ(100px); }
612 .left { transform: rotateY(-90deg) translateZ(100px); }
613 .right { transform: rotateY(90deg) translateZ(100px); }
614 .top { transform: rotateX(90deg) translateZ(100px); }
615 .bottom { transform: rotateX(-90deg) translateZ(100px); }
616
617 .gallery-title,
618 .skills-title {
619 font-size: 2rem;
620 }
621
622 .nav-links {
623 display: none;
624 }
625 }
626 </style>
627</head>
628<body>
629 <!-- Loading Screen -->
630 <div class="loading-screen">
631 <div class="loader">
632 <div class="loader-circle"></div>
633 <div class="loader-circle"></div>
634 <div class="loader-circle"></div>
635 </div>
636 </div>
637
638 <!-- Animated background particles -->
639 <div class="particles">
640 <div class="particle"></div>
641 <div class="particle"></div>
642 <div class="particle"></div>
643 <div class="particle"></div>
644 <div class="particle"></div>
645 <div class="particle"></div>
646 <div class="particle"></div>
647 <div class="particle"></div>
648 <div class="particle"></div>
649 <div class="particle"></div>
650 </div>
651
652 <!-- Navigation -->
653 <nav class="navbar">
654 <div class="nav-container">
655 <div class="logo">Portfolio 3D</div>
656 <ul class="nav-links">
657 <li><a href="#home" class="nav-link">Home</a></li>
658 <li><a href="#projects" class="nav-link">Projects</a></li>
659 <li><a href="#skills" class="nav-link">Skills</a></li>
660 <li><a href="#contact" class="nav-link">Contact</a></li>
661 </ul>
662 </div>
663 </nav>
664
665 <!-- Hero Section with 3D Cube -->
666 <section class="hero" id="home">
667 <div class="cube-container">
668 <div class="cube-face front">Front</div>
669 <div class="cube-face back">Back</div>
670 <div class="cube-face left">Left</div>
671 <div class="cube-face right">Right</div>
672 <div class="cube-face top">Top</div>
673 <div class="cube-face bottom">Bottom</div>
674 </div>
675 </section>
676
677 <!-- Automatic Slider -->
678 <div class="slider">
679 <div class="slider-wrapper">
680 <div class="slide">
681 <div class="slide-content">
682 <h2>Project 1</h2>
683 <p>Corporate website</p>
684 </div>
685 </div>
686 <div class="slide">
687 <div class="slide-content">
688 <h2>Project 2</h2>
689 <p>Mobile application</p>
690 </div>
691 </div>
692 <div class="slide">
693 <div class="slide-content">
694 <h2>Project 3</h2>
695 <p>E-commerce</p>
696 </div>
697 </div>
698 <div class="slide">
699 <div class="slide-content">
700 <h2>Project 4</h2>
701 <p>Analytics dashboard</p>
702 </div>
703 </div>
704 </div>
705 <div class="slider-indicators">
706 <div class="indicator"></div>
707 <div class="indicator"></div>
708 <div class="indicator"></div>
709 <div class="indicator"></div>
710 </div>
711 </div>
712
713 <!-- Project gallery -->
714 <section class="gallery" id="projects">
715 <h2 class="gallery-title">My Projects</h2>
716 <div class="projects-grid">
717 <div class="project-card">
718 <div class="project-image">
719 <div class="project-wave"></div>
720 </div>
721 <div class="project-content">
722 <h3 class="project-title">Project Alpha</h3>
723 <p class="project-description">A modern web application using the latest technologies.</p>
724 </div>
725 </div>
726 <div class="project-card">
727 <div class="project-image">
728 <div class="project-wave"></div>
729 </div>
730 <div class="project-content">
731 <h3 class="project-title">Project Beta</h3>
732 <p class="project-description">A responsive online store with an advanced payment system.</p>
733 </div>
734 </div>
735 <div class="project-card">
736 <div class="project-image">
737 <div class="project-wave"></div>
738 </div>
739 <div class="project-content">
740 <h3 class="project-title">Project Gamma</h3>
741 <p class="project-description">A content management system for large enterprises.</p>
742 </div>
743 </div>
744 <div class="project-card">
745 <div class="project-image">
746 <div class="project-wave"></div>
747 </div>
748 <div class="project-content">
749 <h3 class="project-title">Project Delta</h3>
750 <p class="project-description">An interactive educational platform with gamification.</p>
751 </div>
752 </div>
753 <div class="project-card">
754 <div class="project-image">
755 <div class="project-wave"></div>
756 </div>
757 <div class="project-content">
758 <h3 class="project-title">Project Epsilon</h3>
759 <p class="project-description">A mobile application for personal finance management.</p>
760 </div>
761 </div>
762 <div class="project-card">
763 <div class="project-image">
764 <div class="project-wave"></div>
765 </div>
766 <div class="project-content">
767 <h3 class="project-title">Project Zeta</h3>
768 <p class="project-description">A social portal for photography enthusiasts.</p>
769 </div>
770 </div>
771 </div>
772 </section>
773
774 <!-- Skills section -->
775 <section class="skills" id="skills">
776 <h2 class="skills-title">Skills</h2>
777 <div class="skill-item">
778 <div class="skill-name">HTML/CSS</div>
779 <div class="skill-bar">
780 <div class="skill-progress"></div>
781 </div>
782 </div>
783 <div class="skill-item">
784 <div class="skill-name">JavaScript</div>
785 <div class="skill-bar">
786 <div class="skill-progress"></div>
787 </div>
788 </div>
789 <div class="skill-item">
790 <div class="skill-name">CSS Animations</div>
791 <div class="skill-bar">
792 <div class="skill-progress"></div>
793 </div>
794 </div>
795 <div class="skill-item">
796 <div class="skill-name">Responsive Design</div>
797 <div class="skill-bar">
798 <div class="skill-progress"></div>
799 </div>
800 </div>
801 </section>
802
803 <!-- Footer -->
804 <footer class="footer">
805 <p>© 2024 Portfolio 3D. All rights reserved.</p>
806 </footer>
807</body>
808</html>Summary
This project demonstrates advanced CSS animation techniques without using JavaScript:
- @keyframes - over 20 different animations
- animation-timing-function - various timing functions (linear, ease, ease-in-out)
- animation-delay - sequential animations with precise delays
- animation-direction - normal and reversed animation directions
- animation-iteration-count - single and infinite animations
- animation-fill-mode - forwards and backwards to preserve states
- Transform 3D - a full 3D cube with perspective
- Automatic slider - using only CSS
- Animated progress indicators - synchronization of multiple animations
- Particle effects - randomly placed animated elements
The project is fully responsive and uses the latest CSS techniques to create an impressive portfolio presentation without a single line of JavaScript.