├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # 3D-Automatic-Slider 2 | Create a Automatic 3D photo slider using HTML & CSS. 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CODE AASHU : 3D Automatic Slider 7 | 8 | 9 | 10 | 11 |
12 |
13 | 17 |
18 |
19 | 23 |
24 |
25 | 29 |
30 |
31 | 35 |
36 |
37 | 41 |
42 |
43 | 47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* ===( CODE AASHU )=== */ 2 | let imgContainer = document.querySelector(".img-container"); 3 | 4 | setInterval(() => { 5 | let last = imgContainer.firstElementChild; 6 | last.remove(); 7 | imgContainer.appendChild(last); 8 | }, 2500); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* ===( CODE AASHU )=== */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | user-select: none; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | background-color: #f5f5f5; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | 17 | .img-container { 18 | position: relative; 19 | height: 500px; 20 | width: 700px; 21 | perspective: 500px; 22 | transform-style: preserve-3d; 23 | } 24 | .box { 25 | box-shadow: 0 0 10px rgb(0 0 0 / 30%); 26 | width: 600px; 27 | height: 440px; 28 | border-radius: 25px; 29 | overflow: hidden; 30 | border: 1px solid #bbb; 31 | position: absolute; 32 | top: 50%; 33 | transition: 800ms ease-in-out; 34 | } 35 | 36 | .box img { 37 | width: 100%; 38 | height: 100%; 39 | } 40 | 41 | .box:first-of-type { 42 | z-index: 5; 43 | opacity: 0; 44 | left: 15%; 45 | transform: translate(-50%, -50%) rotateY(-10deg); 46 | } 47 | 48 | .box:nth-of-type(2) { 49 | opacity: 1; 50 | left: 20%; 51 | transform: translate(-50%, -50%) rotateY(-10deg); 52 | z-index: 5; 53 | 54 | } 55 | .box:nth-of-type(3) { 56 | left: 25%; 57 | opacity: 0.75; 58 | color: #eee; 59 | z-index: 10; 60 | transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-50px); 61 | } 62 | 63 | .box:nth-of-type(4) { 64 | z-index: 5; 65 | opacity: 0.5; 66 | left:30%; 67 | transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-100px); 68 | } 69 | .box:nth-of-type(5) { 70 | z-index: 2; 71 | opacity: 0.25; 72 | left: 35%; 73 | transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-150px); 74 | } 75 | 76 | .box:nth-of-type(6) { 77 | z-index: 2; 78 | opacity: 0.0; 79 | left: 40%; 80 | transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-200px); 81 | } 82 | --------------------------------------------------------------------------------