Carousel readme

Author: Secretariat

3D Carousel/script.js

@@ -90,7 +90,6 @@ document.onpointerdown = function (e) {
 
 document.onmousewheel = function (e) {
   e = e || window.event;
-  console.log(e.wheelDelta, e.detail);
   var d = e.wheelDelta / 20 || -e.detail;
   radius += d;
   init(1);

README.md

@@ -5,6 +5,10 @@ All animations were inspired and implemented by CodePen.
   - [Table of contents](#table-of-contents)
   - [3D Card](#3d-card)
     - [CSS](#css)
+  - [3D Carousel](#3d-carousel)
+    - [Start Effect](#start-effect)
+    - [Image 3D Effect](#image-3d-effect)
+    - [Mouse Event Effect](#mouse-event-effect)
 
 ## Table of contents[](#table-of-contents)
 - 3D Card
@@ -21,4 +25,73 @@ This project is a project that implements a 3D card using CSS.
   -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
 }
+```
+
+## 3D Carousel[](#3d-carousel)
+<img align="center" src="/screenshot/3D_Carousel/Carousel.jpg" alt="3D_Carousel" style="width:100%;height:100%"/>
+This project is a project that implements the image carousel effect using CSS and JavaScript.
+
+### Start Effect
+```
+for (var i = 0; i < imgs.length; i++) {
+    imgs[i].style.transform = "rotateY(" + i * (360 / imgs.length) + "deg) translateZ(" + radius + "px)";
+    imgs[i].style.transition = "transform 1s";
+    imgs[i].style.transitionDelay = delayTime || (imgs.length - i) / 4 + "s";
+  }
+```
+
+### Image 3D Effect
+```
+img {
+  transform-style: preserve-3d;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  line-height: 200px;
+  font-size: 50px;
+  text-align: center;
+  box-shadow: 0 0 8px #fff;
+  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
+}
+```
+
+### Mouse Event Effect
+```
+document.onpointerdown = function (e) {
+  clearInterval(wheel.timer);
+  e = e || window.event;
+  var sX = e.clientX, sY = e.clientY;
+
+  this.onpointermove = function (e) {
+    e = e || window.event;
+    var nX = e.clientX, nY = e.clientY;
+    desX = nX - sX;
+    desY = nY - sY;
+    tX += desX * 0.1;
+    tY += desY * 0.1;
+    applyTransform(wheel);
+    sX = nX;
+    sY = nY;
+  };
+
+  this.onpointerup = function (e) {
+    wheel.timer = setInterval(function () {
+      desX *= 0.95;
+      desY *= 0.95;
+      tX += desX * 0.1;
+      tY += desY * 0.1;
+      applyTransform(wheel);
+      playSpin(false);
+      if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
+        clearInterval(wheel.timer);
+        playSpin(true);
+      }
+    }, 17);
+    this.onpointermove = this.onpointerup = null;
+  };
+
+  return false;
+};
 ```