Merge branch 'master' into dependabot/npm_and_yarn/adobe/css-tools-4.3.2

AaronCCWong · May 31, 2024 · 310b889 · 310b889
2 parents df6be4f + 6fe0165
commit 310b889
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/lib/ReactCardFlip.js b/lib/ReactCardFlip.js
@@ -67,13 +67,13 @@ var ReactCardFlip = function (props) {
     var frontRotateX = "rotateX(".concat(infinite ? rotation : isFlipped ? 180 : 0, "deg)");
     var backRotateX = "rotateX(".concat(infinite ? rotation + 180 : isFlipped ? 0 : -180, "deg)");
     var styles = {
-        back: __assign({ WebkitBackfaceVisibility: 'hidden', backfaceVisibility: 'hidden', height: '100%', left: '0', position: isFlipped ? 'relative' : 'absolute', top: '0', transform: flipDirection === 'horizontal' ? backRotateY : backRotateX, transformStyle: 'preserve-3d', transition: "".concat(flipSpeedFrontToBack, "s"), width: '100%' }, back),
+        back: __assign({ WebkitBackfaceVisibility: 'hidden', backfaceVisibility: 'hidden', height: '100%', left: '0', position: isFlipped ? 'relative' : 'absolute', top: '0', transform: flipDirection === 'horizontal' ? backRotateY : backRotateX, transformStyle: 'preserve-3d', transition: "".concat(flipSpeedFrontToBack, "s"), width: '100%', zIndex: isFlipped ? '2' : '1' }, back),
         container: {
-            perspective: '1000px',
             zIndex: "".concat(cardZIndex),
         },
         flipper: {
             height: '100%',
+            perspective: '1000px',
             position: 'relative',
             width: '100%',
         },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-card-flip",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "ReactCardFlip",
   "main": "./lib/ReactCardFlip.js",
   "types": "./lib/ReactCardFlip.d.ts",

diff --git a/src/ReactCardFlip.tsx b/src/ReactCardFlip.tsx
@@ -17,7 +17,7 @@ const ReactCardFlip: React.FC<ReactFlipCardProps> = (props) => {
     flipSpeedBackToFront,
     infinite,
     isFlipped,
-  } = { 
+  } = {
     cardStyles: {
       back: {},
       front: {},
@@ -31,7 +31,7 @@ const ReactCardFlip: React.FC<ReactFlipCardProps> = (props) => {
     isFlipped: false,
     ...props
   }
-  
+
   const [isFlippedState, setFlipped] = useState(isFlipped);
   const [rotation, setRotation] = useState(0);
 
@@ -84,14 +84,15 @@ const ReactCardFlip: React.FC<ReactFlipCardProps> = (props) => {
       transformStyle: 'preserve-3d',
       transition: `${flipSpeedFrontToBack}s`,
       width: '100%',
+      zIndex: isFlipped ? '2' : '1',
       ...back,
     },
     container: {
-      perspective: '1000px',
       zIndex: `${cardZIndex}`,
     },
     flipper: {
       height: '100%',
+      perspective: '1000px',
       position: 'relative',
       width: '100%',
     },