From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 21 Feb 2022 17:32:23 +0000 (+0100)
Subject: wait #5087 @0.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=801a60f5401d53fb37219555df7cf907e0d1bc59;p=fluidbook-html5.git

wait #5087 @0.5
---

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 0bbc6619..a1be9894 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -93,7 +93,8 @@ FluidbookLinks.prototype = {
         });
 
         $(document).on(this.fluidbook.input.clickEvent, '[data-flipcard] > a', function () {
-            $(this).closest('[data-flipcard]').find('.flipcard').toggleClass('flipped');
+            var f = $(this).closest('[data-flipcard]');
+            f.find('.flipcard').toggleClass('flipped');
             return false;
         });
 
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 622a3beb..c6af2276 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1454,6 +1454,30 @@ html.ios body.portrait #interface {
       z-index: 1;
     }
 
+    &[data-flipcard="axis-y"] {
+      .flipcard {
+        &.flipped {
+          transform: rotateY(180deg);
+        }
+
+        > div.back {
+          transform: rotateY(180deg);
+        }
+      }
+    }
+
+    &[data-flipcard="axis-x"] {
+      .flipcard {
+        &.flipped {
+          transform: rotateX(180deg);
+        }
+
+        > div.back {
+          transform: rotateX(180deg);
+        }
+      }
+    }
+
     .flipcard {
       width: 100%;
       height: 100%;
@@ -1461,10 +1485,6 @@ html.ios body.portrait #interface {
       transition: transform 0.8s;
       transform-style: preserve-3d;
 
-      &.flipped {
-        transform: rotateY(180deg);
-      }
-
       > div {
         position: absolute;
         top: 0;
@@ -1473,10 +1493,6 @@ html.ios body.portrait #interface {
         height: 100%;
         backface-visibility: hidden;
 
-        &.back {
-          transform: rotateY(180deg);
-        }
-
         img {
           width: 100%;
           height: 100%