Merge pull request #479 from trip0le/trip0le

Added an HTML CSS project- Rotating Gallery
fineanmol · Oct 3, 2021 · 1f88b83 · 1f88b83
2 parents bc353a7 + 29ce767
commit 1f88b83
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 0 deletions.
diff --git a/Rotating Gallery/images/img1.jpg b/Rotating Gallery/images/img1.jpg
diff --git a/Rotating Gallery/images/img2.jpg b/Rotating Gallery/images/img2.jpg
diff --git a/Rotating Gallery/images/img3.jpg b/Rotating Gallery/images/img3.jpg
diff --git a/Rotating Gallery/images/img4.jpg b/Rotating Gallery/images/img4.jpg
diff --git a/Rotating Gallery/images/img5.jpg b/Rotating Gallery/images/img5.jpg
diff --git a/Rotating Gallery/images/img6.jpg b/Rotating Gallery/images/img6.jpg
diff --git a/Rotating Gallery/images/img7.jpg b/Rotating Gallery/images/img7.jpg
diff --git a/Rotating Gallery/images/img8.jpg b/Rotating Gallery/images/img8.jpg
diff --git a/Rotating Gallery/index.html b/Rotating Gallery/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS 3D Rotating Image Gallery</title>
+        <link rel="stylesheet" type="text/css" href="style.css">
+    </head>
+    <body>
+        <div class="box">
+            <span id="img1" style="--i:1;"><img src="images/img1.jpg"></span>
+            <span style="--i:2;"><img src="images/img2.jpg"></span>
+            <span style="--i:3;"><img src="images/img3.jpg"></span>
+            <span style="--i:4;"><img src="images/img4.jpg"></span>
+            <span style="--i:5;"><img src="images/img6.jpg"></span>
+            <span style="--i:6;"><img src="images/img5.jpg"></span>
+            <span style="--i:7;"><img src="images/img7.jpg"></span>
+            <span style="--i:8;"><img src="images/img8.jpg"></span>
+        </div>
+    </body>
+</html>
diff --git a/Rotating Gallery/style.css b/Rotating Gallery/style.css
@@ -0,0 +1,46 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing : border-box;
+}
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #000;
+}
+.box{
+    position: relative;
+    width: 200px;
+    height: 200px;
+    transform-style: preserve-3d;
+    animation: animate 20s linear infinite;
+}
+@keyframes animate {
+    0%{
+        transform: perspective(1000px) rotateY(0deg);
+    }
+    100%{
+        transform: perspective(1000px) rotateY(360deg);
+    }
+}
+.box span{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: center;
+    transform-style: preserve-3d;
+     transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
+    -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0004);
+}
+.box span img{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}