diff --git a/components/compositions/tree-card/index.tsx b/components/compositions/tree-card/index.tsx
index eaf75b6..b4542bd 100644
--- 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
index 3d5dd9d..e5cfed3 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -92,11 +92,13 @@
   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,
@@ -104,6 +106,9 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
+
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
 }
 html {
   -webkit-text-size-adjust: none;