Skip to content

Commit ad477e4

Browse files
HuXn-WebDevHuXn-WebDev
committed
Rotating Image Gallery Using HTML, CSS and JAVASCRIPT
1 parent f5018ff commit ad477e4

File tree

3 files changed

+142
-0
lines changed

3 files changed

+142
-0
lines changed

‎62. Rotating Image Gallery/app.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const imageContainer = document.querySelector(".image-container");
2+
const prevBtn = document.getElementById("prev");
3+
const nextBtn = document.getElementById("next");
4+
5+
let x = 0;
6+
7+
prevBtn.addEventListener("click", () => {
8+
x = x + 45;
9+
rotate();
10+
});
11+
12+
nextBtn.addEventListener("click", () => {
13+
x = x - 45;
14+
rotate();
15+
});
16+
17+
function rotate() {
18+
imageContainer.style.transform = `perspective(1000px) rotateY(${x}deg)`;
19+
}

‎62. Rotating Image Gallery/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Rotating Gallery</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="image-container">
11+
<span style="--i: 1">
12+
<img
13+
src="https://images.unsplash.com/photo-1477884213360-7e9d7dcc1e48?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGRvZ3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60"
14+
/>
15+
</span>
16+
<span style="--i: 2">
17+
<img
18+
src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGdpcmx8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
19+
/>
20+
</span>
21+
<span style="--i: 3">
22+
<img
23+
src="https://images.unsplash.com/photo-1581704906775-891dd5207444?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGJveXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60"
24+
/>
25+
</span>
26+
<span style="--i: 4">
27+
<img
28+
src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60"
29+
/>
30+
</span>
31+
<span style="--i: 5">
32+
<img
33+
src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60"
34+
/>
35+
</span>
36+
<span style="--i: 6">
37+
<img
38+
src="https://images.unsplash.com/photo-1548036328-c9fa89d128fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8YmFnfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60"
39+
/>
40+
</span>
41+
<span style="--i: 7">
42+
<img
43+
src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGJvb2t8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
44+
/>
45+
</span>
46+
<span style="--i: 8">
47+
<img
48+
src="https://images.unsplash.com/photo-1582142407894-ec85a1260a46?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGdsYXNzZXN8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
49+
/>
50+
</span>
51+
</div>
52+
53+
<div class="btn-container">
54+
<button class="btn" id="prev">Prev</button>
55+
<button class="btn" id="next">Next</button>
56+
</div>
57+
58+
<script src="app.js"></script>
59+
</body>
60+
</html>

‎62. Rotating Image Gallery/style.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
body {
2+
margin: 0;
3+
display: flex;
4+
flex-direction: column;
5+
justify-content: center;
6+
align-items: center;
7+
text-align: center;
8+
height: 100vh;
9+
background: black;
10+
overflow: hidden;
11+
}
12+
13+
.image-container {
14+
position: relative;
15+
width: 200px;
16+
height: 200px;
17+
transform-style: preserve-3d;
18+
transform: perspective(1000px) rotateY(0deg);
19+
transition: transform 0.7s;
20+
}
21+
22+
.image-container span {
23+
position: absolute;
24+
top: 0;
25+
left: 0;
26+
width: 100%;
27+
transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
28+
}
29+
30+
.image-container span img {
31+
position: absolute;
32+
left: 0;
33+
top: 0;
34+
width: 100%;
35+
}
36+
37+
.btn-container {
38+
position: relative;
39+
width: 80%;
40+
}
41+
42+
.btn {
43+
position: absolute;
44+
bottom: -80px;
45+
background: crimson;
46+
color: #fff;
47+
border: none;
48+
padding: 10px 20px;
49+
border-radius: 5px;
50+
cursor: pointer;
51+
}
52+
53+
#prev {
54+
left: 20%;
55+
}
56+
57+
#next {
58+
right: 20%;
59+
}
60+
61+
.btn:hover {
62+
filter: brightness(1.5);
63+
}

0 commit comments

Comments
 (0)