Skip to content

Commit 5bc6367

Browse files
Abirpal202049Abirpal202049
authored
Merge pull request Dezenix#53 from suyogkokaje/suyog
feat: added 3D Carousel
2 parents 324af3a + c0a9248 commit 5bc6367

File tree

3 files changed

+117
-0
lines changed

3 files changed

+117
-0
lines changed

‎Carousels/3D Carousel_01/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# 3D Carousel
2+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
3+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> </p>
4+
<hr>
5+
6+
![Preview](https://media.giphy.com/media/WUz61GeX92HktYtiUR/giphy.gif)

‎Carousels/3D Carousel_01/code/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>3D Carousel</title>
9+
</head>
10+
<body>
11+
<section class="parent">
12+
<div class="container">
13+
<div class="carousel">
14+
<div class="carousel__face"><span>Sample Text 1</span></div>
15+
<div class="carousel__face"><span>Sample Text 2</span></div>
16+
<div class="carousel__face"><span>Sample Text 3</span></div>
17+
<div class="carousel__face"><span>Sample Text 4</span></div>
18+
<div class="carousel__face"><span>Sample Text 5</span></div>
19+
<div class="carousel__face"><span>Sample Text 6</span></div>
20+
<div class="carousel__face"><span>Sample Text 7</span></div>
21+
<div class="carousel__face"><span>Sample Text 8</span></div>
22+
<div class="carousel__face"><span>Sample Text 9</span></div>
23+
</div>
24+
</div>
25+
</section>
26+
</body>
27+
</html>

‎Carousels/3D Carousel_01/code/style.css

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.parent{
2+
background: lightgray;
3+
font-family: sans-serif;
4+
color: #fefefe;
5+
height: 100vh;
6+
overflow: hidden;
7+
}
8+
.container{
9+
position: relative;
10+
width: 320px;
11+
margin: 100px auto 0 auto;
12+
perspective: 1000px;
13+
}
14+
15+
.carousel{
16+
position: absolute;
17+
width: 100%;
18+
height: 100%;
19+
transform-style: preserve-3d;
20+
animation: rotate360 60s infinite forwards linear;
21+
}
22+
.carousel__face{
23+
position: absolute;
24+
width: 300px;
25+
height: 187px;
26+
top: 20px;
27+
left: 10px;
28+
right: 10px;
29+
background-size: cover;
30+
box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.5);
31+
display: flex;
32+
}
33+
34+
span{
35+
margin: auto;
36+
font-size: 2rem;
37+
}
38+
39+
.carousel__face:nth-child(1){
40+
background-image: url("https://images.pexels.com/photos/1141853/pexels-photo-1141853.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
41+
transform: rotateY( 0deg) translateZ(430px);
42+
}
43+
.carousel__face:nth-child(2){
44+
background-image: url("https://images.pexels.com/photos/1258865/pexels-photo-1258865.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
45+
transform: rotateY( 40deg) translateZ(430px);
46+
}
47+
.carousel__face:nth-child(3){
48+
background-image: url("https://images.pexels.com/photos/808466/pexels-photo-808466.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
49+
transform: rotateY( 80deg) translateZ(430px);
50+
}
51+
.carousel__face:nth-child(4){
52+
background-image: url("https://images.pexels.com/photos/1394841/pexels-photo-1394841.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
53+
transform: rotateY(120deg) translateZ(430px);
54+
}
55+
.carousel__face:nth-child(5){
56+
background-image: url("https://images.pexels.com/photos/1141853/pexels-photo-1141853.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
57+
transform: rotateY(160deg) translateZ(430px);
58+
}
59+
.carousel__face:nth-child(6){
60+
background-image: url("https://images.pexels.com/photos/1834400/pexels-photo-1834400.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
61+
transform: rotateY(200deg) translateZ(430px);
62+
}
63+
.carousel__face:nth-child(7){
64+
background-image: url("https://images.pexels.com/photos/1415268/pexels-photo-1415268.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
65+
transform: rotateY(240deg) translateZ(430px);
66+
}
67+
.carousel__face:nth-child(8){
68+
background-image: url("https://images.pexels.com/photos/135018/pexels-photo-135018.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
69+
transform: rotateY(280deg) translateZ(430px);
70+
}
71+
.carousel__face:nth-child(9){
72+
background-image: url("https://images.pexels.com/photos/1175135/pexels-photo-1175135.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
73+
transform: rotateY(320deg) translateZ(430px);
74+
}
75+
76+
77+
@keyframes rotate360 {
78+
from {
79+
transform: rotateY(0deg);
80+
}
81+
to {
82+
transform: rotateY(-360deg);
83+
}
84+
}

0 commit comments

Comments
 (0)