feat : 트리카드 back 3d, webkit css 설정

dnd-side-project · Feb 29, 2024 · fc09955 · fc09955
1 parent 1755dd6
commit fc09955
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/components/compositions/tree-card/index.tsx b/components/compositions/tree-card/index.tsx
@@ -52,7 +52,10 @@ const TreeCard = ({
     <motion.div
       id={id}
       variants={fadeInProps.variants}
-      className={cn('w-[104px] h-[110px] cursor-pointer relative')}
+      className={cn('w-[104px] h-[110px] cursor-pointer relative', {
+        'preserve-3d': isFlipped,
+      })}
+      style={{ transformStyle: 'preserve-3d' }}
       onClick={handleCardClick}
     >
       <div

diff --git a/styles/global.css b/styles/global.css
@@ -92,18 +92,23 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
 
 .card .card-back {
   transform: rotateY(180deg);
+  -webkit-transform: rotateY(180deg);
 }
 
 .card .card-front,
 .card .card-back {
   width: 100%;
   height: 100%;
   overflow: hidden;
+
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
 }
 html {
   -webkit-text-size-adjust: none;