From 481ce09aa523de3792295e766c1bc4c80982bf53 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Tue, 26 May 2020 23:31:44 -0700
Subject: re-structured 3D carousel

---
 .../collections/CollectionCarousel3DView.scss      | 46 +++++++---------------
 1 file changed, 15 insertions(+), 31 deletions(-)

(limited to 'src/client/views/collections/CollectionCarousel3DView.scss')

diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss
index df64d8cbe..d1504dd12 100644
--- a/src/client/views/collections/CollectionCarousel3DView.scss
+++ b/src/client/views/collections/CollectionCarousel3DView.scss
@@ -1,37 +1,21 @@
 .collectionCarouselView-outer {
-    background: white;
     height: 100%;
-    perspective: 40em;
+    position: relative;
+    background-color: white;
+}
 
-    .collectionCarouselView-center {
-        position: absolute;
-        height: 80%;
-        width: 50%;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        margin: auto;
-        user-select: none;
-        transition: transform 0.5s;
-        transform-style: preserve-3d;
-    }
-
-    .collectionCarouselView-prev {
-        position: absolute;
-        height: 50%;
-        width: 25%;
-        left: 0;
-        top: 25%;
-        transform: rotateY(-20deg);
-    }
+.carousel-wrapper {
+    display: flex;
+    position: absolute;
+    top: 10px;
+    align-items: center;
+    transition: transform 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 
-    .collectionCarouselView-next {
-        position: absolute;
-        height: 50%;
-        width: 25%;
-        right: 0;
-        top: 25%;
-        transform: rotateY(20deg);
+    .collectionCarouselView-item {
+        flex: 1;
+        transition: opacity 0.5s linear;
+        transition: transform 0.5s linear;
+        transition: height 0.5s linear;
+        transition: width 0.5s linear;
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2