@simhub2/justflipit 3.1.0 → 3.2.1

package/README.md

@@ -6,7 +6,7 @@
 
 # justFlipIt
 
-A lightweight JavaScript library for beautiful, customizable 3D flip animations on any DOM element.
+A lightweight JavaScript library for beautiful, customizable flip animations on any DOM element.
 
 ---
 
@@ -41,27 +41,26 @@ justFlipIt(".my-card");
 
 ---
 
-## 🆕 Plug & Play: Automatisches Übernehmen von Klassen und Styles
+## 🆕 Plug & Play: Automatic adoption of classes and styles
 
-Ab Version X übernimmt justFlipIt **automatisch alle CSS-Klassen und Inline-Styles** deines Elements auf das Flip-Panel.
+**This means:**
 
-**Das bedeutet:**  
-Du kannst z.B. einfach
+For example, you can simply
 
 ```js
 justFlipIt(".daisyui-card");
 ```
 
-aufrufen – und alle Farben, Schatten, Abstände usw. bleiben erhalten, egal ob du Tailwind, daisyUI, Bootstrap oder eigene Styles verwendest.
+and all colors, shadows, spacing, etc. are retained, whether you use Tailwind, daisyUI, Bootstrap or your own styles.
 
-### **Optionen**
+### **Options**
 
-| Option          | Typ  | Standard | Beschreibung                                                   |
-| --------------- | ---- | -------- | -------------------------------------------------------------- |
-| preserveClasses | Bool | true     | Übernimmt alle CSS-Klassen vom Originalelement auf das Panel   |
-| preserveStyles  | Bool | true     | Übernimmt alle Inline-Styles vom Originalelement auf das Panel |
+| Option          | Type | Standard | Description                                                         |
+| --------------- | ---- | -------- | ------------------------------------------------------------------- |
+| preserveClasses | Bool | true     | Takes all CSS classes from the original element to the panel        |
+| preserveStyles  | Bool | true     | Takes over all inline styles from the original element to the panel |
 
-**Beispiel:**
+**Example:**
 
 ```js
 // Standard: Plug & Play
@@ -75,7 +74,7 @@ justFlipIt(".meine-karte", { preserveClasses: false, preserveStyles: false });
 
 ## 🎨 Customizing (Erweitert)
 
-Du kannst alle Optionen von justFlipIt wie gewohnt nutzen – z.B. eigene Templates, Flip-Richtung, Animationen, gezielte Styles:
+You can use all options from justFlipIt as usual – e.g. your own templates, flip direction, animations, targeted styles:
 
 ```js
 justFlipIt(".meine-karte", {
@@ -101,10 +100,10 @@ justFlipIt(".meine-karte", {
 });
 ```
 
-**Tipp:**
+**Tip:**
 
-- Mit `preserveClasses: false` und `preserveStyles: false` hast du die volle Kontrolle und kannst alles gezielt per Option oder CSS stylen.
-- Mit den Standardwerten (`true`) bleibt alles wie beim Originalelement – Plug & Play!
+- With preserveClasses: false and preserveStyles: false you have full control and can style everything specifically via option or CSS.
+- With the default values (true) everything remains like the original element – Plug & Play!
 
 ---
 
@@ -115,7 +114,7 @@ justFlipIt(".meine-karte", {
 - 📱 **Modern & Responsive** – Works on all modern browsers and devices
 - 🔧 **Flexible Import** – Use via script tag, npm, or ES modules
 - 🎯 **jQuery Optional** – Works with or without jQuery
-- 🎭 **3D Flip Animations** – Beautiful CSS3 transform-based effects
+- 🎭 **Flip Animations** – Beautiful CSS3 transform-based effects
 - ⚙️ **Simple API** – Easy configuration for duration, easing, triggers, and more
 
 ---
@@ -181,16 +180,28 @@ See the [Live Demo](https://SimHub.github.io/justFlipIt/) for all options, advan
 
 ## License
 
-MIT License – see LICENSE
+MIT © [SimHub](https://github.com/SimHub)
 
----
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights  
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
+copies of the Software, and to permit persons to whom the Software is  
+furnished to do so, subject to the following conditions:
 
-**[🌟 Star this project on GitHub](https://github.com/SimHub/justFlipIt)** | **[📦 View on NPM](https://www.npmjs.com/package/@simhub2/justflipit)**
+The above copyright notice and this permission notice shall be included in all  
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE  
+SOFTWARE.
 
 ---
 
-### Notes
+**[🌟 Star this project on GitHub](https://github.com/SimHub/justFlipIt)** | **[📦 View on NPM](https://www.npmjs.com/package/@simhub2/justflipit)**
 
-- For more practical examples (hover, click, button, custom back, styling, vertical/horizontal, product card, etc.), see the [Live Demo](https://SimHub.github.io/justFlipIt/).
-- The recommended CSS block above ensures robust, flicker-free, and responsive flip animations for all use cases.
-- For questions or suggestions, feel free to open an issue or contribute!
+---

package/dist/justFlipIt-modern.js

@@ -1,11 +1,11 @@
 /*!
- * Modern justFlipIt v3.0.0
+ * justFlipIt v3.1.0
  * https://github.com/SimHub/justFlipIt
  *
- * Copyright simon Lackmann
+ * Copyright SimHub
  * Released under the MIT license
  *
- * Date: 2023
+ * Date: 2025
  */
 
 (function (root, factory) {
@@ -20,14 +20,13 @@
   "use strict";
 
   // Feature detection
-  const supportsGrid =
-    typeof CSS !== "undefined" &&
+  const supportsGrid = typeof CSS !== "undefined" &&
     CSS.supports &&
     CSS.supports("display", "grid");
-  const supportsWebAnimations =
-    typeof Element !== "undefined" && "animate" in Element.prototype;
-  const supportsCustomProperties =
-    window.CSS && CSS.supports && CSS.supports("color", "var(--test)");
+  const supportsWebAnimations = typeof Element !== "undefined" &&
+    "animate" in Element.prototype;
+  const supportsCustomProperties = window.CSS && CSS.supports &&
+    CSS.supports("color", "var(--test)");
 
   // Style generation based on browser support
   function generateStyles() {
@@ -218,7 +217,7 @@
           Duration: 400, // Animation duration in ms
           Easing: "ease-in-out", // Animation easing function
           preserveClasses: true, // NEU
-          preserveStyles: true   // NEU
+          preserveStyles: true, // NEU
         },
         options,
       );
@@ -250,6 +249,10 @@
       // Initialize flip
       this._init();
 
+      if (this.settings.Tilt) {
+        this._setupTilt();
+      }
+
       // Store instance
       instanceMap.set(element, this);
     }
@@ -269,17 +272,28 @@
 
       // NEU: Klassen übernehmen (Panel, .front, .backY)
       if (this.settings.preserveClasses && originalElement.classList.length) {
-        originalElement.classList.forEach(cls => {
-          if (!hoverPanel.classList.contains(cls)) hoverPanel.classList.add(cls);
-          if (frontWrapper && !frontWrapper.classList.contains(cls)) frontWrapper.classList.add(cls);
-          if (backWrapper && !backWrapper.classList.contains(cls)) backWrapper.classList.add(cls);
+        originalElement.classList.forEach((cls) => {
+          if (!hoverPanel.classList.contains(cls)) {
+            hoverPanel.classList.add(cls);
+          }
+          if (frontWrapper && !frontWrapper.classList.contains(cls)) {
+            frontWrapper.classList.add(cls);
+          }
+          if (backWrapper && !backWrapper.classList.contains(cls)) {
+            backWrapper.classList.add(cls);
+          }
         });
       }
 
       // NEU: Inline-Styles übernehmen (nur auf Panel)
-      if (this.settings.preserveStyles && originalElement.getAttribute("style")) {
-        hoverPanel.setAttribute("style", (hoverPanel.getAttribute("style") || "") +
-          ";" + originalElement.getAttribute("style"));
+      if (
+        this.settings.preserveStyles && originalElement.getAttribute("style")
+      ) {
+        hoverPanel.setAttribute(
+          "style",
+          (hoverPanel.getAttribute("style") || "") +
+          ";" + originalElement.getAttribute("style"),
+        );
       }
 
       // Nur den INHALT übernehmen!
@@ -326,7 +340,31 @@
       this.backWrapper = backWrapper;
     }
 
+    _setupTilt() {
+      this.hoverPanel.addEventListener("mousemove", (e) => {
+        const rect = this.hoverPanel.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = ((y - centerY) / centerY) * 10;
+        const rotateY = (-(x - centerX) / centerX) * 10;
+
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+      });
+
+      this.hoverPanel.addEventListener("mouseenter", () => {
+        this.hoverPanel.style.transition = "all 0.2s ease-out";
+      });
+
+      this.hoverPanel.addEventListener("mouseleave", () => {
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
+        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      });
+    }
+
     _setupEvents(hoverPanel) {
+      if (this.settings.Tilt === 'only') return;
       if (this.settings.Click === true) {
         hoverPanel.addEventListener("click", (e) => {
           e.preventDefault();

package/dist/justFlipIt-modern.min.js

@@ -1 +1 @@
-((t,e)=>{"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():t.justFlipIt=e()})("undefined"!=typeof self?self:this,function(){"undefined"!=typeof CSS&&CSS.supports&&CSS.supports("display","grid");let a="undefined"!=typeof Element&&"animate"in Element.prototype;window.CSS&&CSS.supports&&CSS.supports("color","var(--test)");function i(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function r(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function s(t,e,s,i,r="ease-in-out"){a?t.animate([{transform:e},{transform:s}],{duration:i,easing:r,fill:"forwards"}):(t.style.transform=s,t.style.webkitTransform=s,t.style.mozTransform=s)}let n=new WeakMap;class o{constructor(t,e={}){var s;document.querySelector('[data-justflipitstyle="justFlipIt"]')||((s=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt"),s.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;position:relative;}._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}._justFlipIt_panel .back, ._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}._justFlipIt_panel .front{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}._justFlipIt_panel .back, ._justFlipIt_panel .backY{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}._justFlipIt_panel .back{transform:rotateX(-180deg);-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);}._justFlipIt_panel._flip_ .front{transform:rotateX(180deg);-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);}._justFlipIt_panel._flip_ .back{transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0);}._justFlipIt_panel .backY{transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);}._justFlipIt_panel._flipY_ .front{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}._justFlipIt_panel._flipY_ .backY{transform:rotateY(0);-webkit-transform:rotateY(0);-moz-transform:rotateY(0);}._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}._justFlipIt_panel > * {box-sizing: border-box;}",document.head.appendChild(s)),this.element=t,this.settings=Object.assign({},{Template:"",Click:!1,FlipX:!1,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:!0,preserveStyles:!0},e),this.elementWidth=i(t,"width"),this.elementHeight=i(t,"height"),this.elementBackgroundColor=i(t,"background-color"),this.originalClassName=t.className,this.originalTagName=t.tagName.toLowerCase(),this.originalId=t.id||"",!0===this.settings.FlipX?(this.flipClass="_flip_",this.backClass="back",this.rotateStart="rotateX(0deg)",this.rotateFront="rotateX(180deg)",this.rotateBack="rotateX(-180deg)",this.rotateReset="rotateX(0deg)"):(this.flipClass="_flipY_",this.backClass="backY",this.rotateStart="rotateY(0deg)",this.rotateFront="rotateY(180deg)",this.rotateBack="rotateY(-180deg)",this.rotateReset="rotateY(0deg)"),this._init(),n.set(t,this)}_init(){var t=this.element;this.originalClassName;let s=document.createElement(this.originalTagName),e=(r(s,"hover"),r(s,"_justFlipIt_panel"),document.createElement("div")),i=(r(e,"front"),document.createElement("div"));r(i,this.backClass),this.settings.preserveClasses&&t.classList.length&&t.classList.forEach(t=>{s.classList.contains(t)||s.classList.add(t),e&&!e.classList.contains(t)&&e.classList.add(t),i&&!i.classList.contains(t)&&i.classList.add(t)}),this.settings.preserveStyles&&t.getAttribute("style")&&s.setAttribute("style",(s.getAttribute("style")||"")+";"+t.getAttribute("style")),e.innerHTML=t.innerHTML,this.settings.Template?i.innerHTML=this.settings.Template:i.innerHTML=t.innerHTML,t.parentNode.insertBefore(s,t),s.appendChild(e),s.appendChild(i),t.parentNode.removeChild(t),s.style.width=this.elementWidth,s.style.height=this.elementHeight,this.settings.Style&&this.settings.Style.length&&this.settings.Style.forEach(e=>{e.el&&("self"===e.el.toLowerCase()?Object.assign(s.style,e.style):s.querySelectorAll(e.el).forEach(t=>{Object.assign(t.style,e.style)}))}),this._setupEvents(s),this.hoverPanel=s,this.frontWrapper=e,this.backWrapper=i}_setupEvents(t){!0===this.settings.Click?t.addEventListener("click",t=>{t.preventDefault(),this._toggleFlip()}):"string"==typeof this.settings.Click?t.querySelectorAll(this.settings.Click).forEach(t=>{t.addEventListener("click",()=>{this._toggleFlip()})}):(t.addEventListener("mouseenter",()=>{this._flip(!0)}),t.addEventListener("mouseleave",()=>{this._flip(!1)}))}_toggleFlip(){t=this.hoverPanel,e=this.flipClass;var t,e=t.classList?t.classList.contains(e):new RegExp("(^| )"+e+"( |$)","gi").test(t.className);this._flip(!e)}_flip(t){var e;t?(r(this.hoverPanel,this.flipClass),a&&(s(this.frontWrapper,this.rotateStart,this.rotateFront,this.settings.Duration,this.settings.Easing),s(this.backWrapper,this.rotateBack,this.rotateReset,this.settings.Duration,this.settings.Easing))):(t=this.hoverPanel,e=this.flipClass,t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," "),a&&(s(this.frontWrapper,this.rotateFront,this.rotateStart,this.settings.Duration,this.settings.Easing),s(this.backWrapper,this.rotateReset,this.rotateBack,this.settings.Duration,this.settings.Easing)))}destroy(){var t=this.hoverPanel,e=t.querySelector(".front > *");e.className=this.originalClassName,t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t),n.delete(this.element)}}function t(t,e={}){var s;return"string"==typeof t?(s=document.querySelectorAll(t),Array.from(s).map(t=>new o(t,e))):t instanceof Element?new o(t,e):t.length?Array.from(t).map(t=>new o(t,e)):void 0}return t.destroy=function(t){var e;"string"==typeof t?(e=document.querySelectorAll(t),Array.from(e).forEach(t=>{t=n.get(t);t&&t.destroy()})):t instanceof Element?(e=n.get(t))&&e.destroy():t.length&&Array.from(t).forEach(t=>{t=n.get(t);t&&t.destroy()})},t});
+(function(root,factory){if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory()}else{root.justFlipIt=factory()}})(typeof self!=="undefined"?self:this,function(){"use strict";const supportsGrid=typeof CSS!=="undefined"&&CSS.supports&&CSS.supports("display","grid");const supportsWebAnimations=typeof Element!=="undefined"&&"animate"in Element.prototype;const supportsCustomProperties=window.CSS&&CSS.supports&&CSS.supports("color","var(--test)");function generateStyles(){let baseStyles="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;position:relative;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}"+"._justFlipIt_panel .back, ._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}";let prefixedStyles="._justFlipIt_panel .front{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}"+"._justFlipIt_panel .back, ._justFlipIt_panel .backY{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}";let xAxisStyles="._justFlipIt_panel .back{transform:rotateX(-180deg);-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);}"+"._justFlipIt_panel._flip_ .front{transform:rotateX(180deg);-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);}"+"._justFlipIt_panel._flip_ .back{transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0);}";let yAxisStyles="._justFlipIt_panel .backY{transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);}"+"._justFlipIt_panel._flipY_ .front{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}"+"._justFlipIt_panel._flipY_ .backY{transform:rotateY(0);-webkit-transform:rotateY(0);-moz-transform:rotateY(0);}";let transparentStyle="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";return baseStyles+prefixedStyles+xAxisStyles+yAxisStyles+transparentStyle}function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt"]')){return}const styleElement=document.createElement("style");styleElement.setAttribute("data-justflipitstyle","justFlipIt");styleElement.textContent=generateStyles();document.head.appendChild(styleElement)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}function applyAnimationSettings(element,duration,easing){const transitionValue=`transform ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue}function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(prop=>{if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function animateFlip(element,start,end,duration,easing="ease-in-out"){if(supportsWebAnimations){const keyframes=[{transform:start},{transform:end}];const options={duration:duration,easing:easing,fill:"forwards"};return element.animate(keyframes,options)}else{element.style.transform=end;element.style.webkitTransform=end;element.style.mozTransform=end;return null}}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back";this.rotateStart="rotateX(0deg)";this.rotateFront="rotateX(180deg)";this.rotateBack="rotateX(-180deg)";this.rotateReset="rotateX(0deg)"}else{this.flipClass="_flipY_";this.backClass="backY";this.rotateStart="rotateY(0deg)";this.rotateFront="rotateY(180deg)";this.rotateBack="rotateY(-180deg)";this.rotateReset="rotateY(0deg)"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);if(this.settings.preserveClasses&&originalElement.classList.length){originalElement.classList.forEach(cls=>{if(!hoverPanel.classList.contains(cls)){hoverPanel.classList.add(cls)}if(frontWrapper&&!frontWrapper.classList.contains(cls)){frontWrapper.classList.add(cls)}if(backWrapper&&!backWrapper.classList.contains(cls)){backWrapper.classList.add(cls)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){this.hoverPanel.addEventListener("mousemove",e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=e.clientX-rect.left;const y=e.clientY-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`});this.hoverPanel.addEventListener("mouseenter",()=>{this.hoverPanel.style.transition="all 0.2s ease-out"});this.hoverPanel.addEventListener("mouseleave",()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"})}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();this._toggleFlip()})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{this._toggleFlip()})})}else{hoverPanel.addEventListener("mouseenter",()=>{this._flip(true)});hoverPanel.addEventListener("mouseleave",()=>{this._flip(false)})}}_toggleFlip(){const isFlipped=hasClass(this.hoverPanel,this.flipClass);this._flip(!isFlipped)}_flip(shouldFlip){if(shouldFlip){addClass(this.hoverPanel,this.flipClass);if(supportsWebAnimations){animateFlip(this.frontWrapper,this.rotateStart,this.rotateFront,this.settings.Duration,this.settings.Easing);animateFlip(this.backWrapper,this.rotateBack,this.rotateReset,this.settings.Duration,this.settings.Easing)}}else{removeClass(this.hoverPanel,this.flipClass);if(supportsWebAnimations){animateFlip(this.frontWrapper,this.rotateFront,this.rotateStart,this.settings.Duration,this.settings.Easing);animateFlip(this.backWrapper,this.rotateReset,this.rotateBack,this.settings.Duration,this.settings.Easing)}}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>{return new JustFlipIt(el,options)})}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>{return new JustFlipIt(el,options)})}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};return justFlipIt});

package/dist/justFlipIt-vanilla.js

@@ -1,11 +1,11 @@
 /*!
- * Vanilla JS justFlipIt v3.0.0
+ * justFlipIt v3.1.0
  * https://github.com/SimHub/justFlipIt
  *
- * Copyright simon Lackmann
+ * Copyright SimHub
  * Released under the MIT license
  *
- * Date: 2023
+ * Date: 2025
  */
 
 (function (root, factory) {
@@ -163,7 +163,7 @@
           Duration: 400,
           Easing: "ease-in-out",
           preserveClasses: true, // NEU
-          preserveStyles: true   // NEU
+          preserveStyles: true, // NEU
         },
         options,
       );
@@ -181,6 +181,9 @@
         this.backClass = "backY";
       }
       this._init();
+      if (this.settings.Tilt) {
+        this._setupTilt();
+      }
       instanceMap.set(element, this);
     }
 
@@ -199,17 +202,28 @@
 
       // NEU: Klassen übernehmen (Panel, .front, .backY)
       if (this.settings.preserveClasses && originalElement.classList.length) {
-        originalElement.classList.forEach(cls => {
-          if (!hoverPanel.classList.contains(cls)) hoverPanel.classList.add(cls);
-          if (frontWrapper && !frontWrapper.classList.contains(cls)) frontWrapper.classList.add(cls);
-          if (backWrapper && !backWrapper.classList.contains(cls)) backWrapper.classList.add(cls);
+        originalElement.classList.forEach((cls) => {
+          if (!hoverPanel.classList.contains(cls)) {
+            hoverPanel.classList.add(cls);
+          }
+          if (frontWrapper && !frontWrapper.classList.contains(cls)) {
+            frontWrapper.classList.add(cls);
+          }
+          if (backWrapper && !backWrapper.classList.contains(cls)) {
+            backWrapper.classList.add(cls);
+          }
         });
       }
 
       // NEU: Inline-Styles übernehmen (nur auf Panel)
-      if (this.settings.preserveStyles && originalElement.getAttribute("style")) {
-        hoverPanel.setAttribute("style", (hoverPanel.getAttribute("style") || "") +
-          ";" + originalElement.getAttribute("style"));
+      if (
+        this.settings.preserveStyles && originalElement.getAttribute("style")
+      ) {
+        hoverPanel.setAttribute(
+          "style",
+          (hoverPanel.getAttribute("style") || "") +
+          ";" + originalElement.getAttribute("style"),
+        );
       }
 
       // Nur den INHALT übernehmen!
@@ -256,7 +270,31 @@
       this.backWrapper = backWrapper;
     }
 
+    _setupTilt() {
+      this.hoverPanel.addEventListener("mousemove", (e) => {
+        const rect = this.hoverPanel.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = ((y - centerY) / centerY) * 10;
+        const rotateY = (-(x - centerX) / centerX) * 10;
+
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+      });
+
+      this.hoverPanel.addEventListener("mouseenter", () => {
+        this.hoverPanel.style.transition = "all 0.2s ease-out";
+      });
+
+      this.hoverPanel.addEventListener("mouseleave", () => {
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
+        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      });
+    }
+
     _setupEvents(hoverPanel) {
+      if (this.settings.Tilt === 'only') return;
       if (this.settings.Click === true) {
         hoverPanel.addEventListener("click", (e) => {
           e.preventDefault();

package/dist/justFlipIt-vanilla.min.js

@@ -1 +1 @@
-((t,e)=>{"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():t.justFlipIt=e()})("undefined"!=typeof self?self:this,function(){function n(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function a(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function e(t,e){var s,i;t.classList?t.classList.toggle(e):(0<=(i=(s=t.className.split(" ")).indexOf(e))?s.splice(i,1):s.push(e),t.className=s.join(" "))}let l=new WeakMap;class i{constructor(t,e={}){var s,i,a;document.querySelector('[data-justflipitstyle="justFlipIt_One"]')||((s=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_One"),s.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}",(i=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_Two"),i.textContent="._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}",(a=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_Transparent"),a.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}._justFlipIt_panel > * {box-sizing: border-box;}",document.head.appendChild(s),document.head.appendChild(i),document.head.appendChild(a)),this.element=t,this.settings=Object.assign({},{Template:"",Click:!1,FlipX:!1,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:!0,preserveStyles:!0},e),this.elementWidth=n(t,"width"),this.elementHeight=n(t,"height"),this.elementBackgroundColor=n(t,"background-color"),this.originalClassName=t.className,this.originalTagName=t.tagName.toLowerCase(),this.originalId=t.id||"",!0===this.settings.FlipX?(this.flipClass="_flip_",this.backClass="back"):(this.flipClass="_flipY_",this.backClass="backY"),this._init(),l.set(t,this)}_init(){var t=this.element;this.originalClassName;let s=document.createElement(this.originalTagName),e=(a(s,"hover"),a(s,"_justFlipIt_panel"),document.createElement("div")),i=(a(e,"front"),document.createElement("div"));a(i,this.backClass),this.settings.preserveClasses&&t.classList.length&&t.classList.forEach(t=>{s.classList.contains(t)||s.classList.add(t),e&&!e.classList.contains(t)&&e.classList.add(t),i&&!i.classList.contains(t)&&i.classList.add(t)}),this.settings.preserveStyles&&t.getAttribute("style")&&s.setAttribute("style",(s.getAttribute("style")||"")+";"+t.getAttribute("style")),e.innerHTML=t.innerHTML,this.settings.Template?i.innerHTML=this.settings.Template:i.innerHTML=t.innerHTML,t.parentNode.insertBefore(s,t),s.appendChild(e),s.appendChild(i),t.parentNode.removeChild(t),s.style.width=this.elementWidth,s.style.height=this.elementHeight,this.settings.Style&&this.settings.Style.length&&this.settings.Style.forEach(e=>{e.el&&("self"===e.el.toLowerCase()?Object.assign(s.style,e.style):s.querySelectorAll(e.el).forEach(t=>{Object.assign(t.style,e.style)}))}),this._setupEvents(s),this.hoverPanel=s,this.frontWrapper=e,this.backWrapper=i}_setupEvents(s){!0===this.settings.Click?s.addEventListener("click",t=>{t.preventDefault(),e(s,this.flipClass)}):"string"==typeof this.settings.Click?s.querySelectorAll(this.settings.Click).forEach(t=>{t.addEventListener("click",()=>{e(s,this.flipClass)})}):(s.addEventListener("mouseenter",()=>{a(s,this.flipClass)}),s.addEventListener("mouseleave",()=>{var t,e;t=s,e=this.flipClass,t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," ")}))}destroy(){var t=this.hoverPanel,e=t.querySelector(".front > *");e.className=this.originalClassName,t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t),l.delete(this.element)}}function t(t,e={}){var s;return"string"==typeof t?(s=document.querySelectorAll(t),Array.from(s).map(t=>new i(t,e))):t instanceof Element?new i(t,e):t.length?Array.from(t).map(t=>new i(t,e)):void 0}return t.destroy=function(t){var e;"string"==typeof t?(e=document.querySelectorAll(t),Array.from(e).forEach(t=>{t=l.get(t);t&&t.destroy()})):t instanceof Element?(e=l.get(t))&&e.destroy():t.length&&Array.from(t).forEach(t=>{t=l.get(t);t&&t.destroy()})},t});
+(function(root,factory){if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory()}else{root.justFlipIt=factory()}})(typeof self!=="undefined"?self:this,function(){"use strict";function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt_One"]')){return}const styleX=document.createElement("style");styleX.setAttribute("data-justflipitstyle","justFlipIt_One");styleX.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}"+"._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}";const styleY=document.createElement("style");styleY.setAttribute("data-justflipitstyle","justFlipIt_Two");styleY.textContent="._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}"+"._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}";const styleTransparent=document.createElement("style");styleTransparent.setAttribute("data-justflipitstyle","justFlipIt_Transparent");styleTransparent.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";document.head.appendChild(styleX);document.head.appendChild(styleY);document.head.appendChild(styleTransparent)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(prop=>{if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function applyAnimationSettings(element,duration,easing){const transitionValue=`all ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue;element.style.msTransition=transitionValue;element.style.OTransition=transitionValue}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back"}else{this.flipClass="_flipY_";this.backClass="backY"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);if(this.settings.preserveClasses&&originalElement.classList.length){originalElement.classList.forEach(cls=>{if(!hoverPanel.classList.contains(cls)){hoverPanel.classList.add(cls)}if(frontWrapper&&!frontWrapper.classList.contains(cls)){frontWrapper.classList.add(cls)}if(backWrapper&&!backWrapper.classList.contains(cls)){backWrapper.classList.add(cls)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){this.hoverPanel.addEventListener("mousemove",e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=e.clientX-rect.left;const y=e.clientY-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`});this.hoverPanel.addEventListener("mouseenter",()=>{this.hoverPanel.style.transition="all 0.2s ease-out"});this.hoverPanel.addEventListener("mouseleave",()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"})}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();toggleClass(hoverPanel,this.flipClass)})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{toggleClass(hoverPanel,this.flipClass)})})}else{hoverPanel.addEventListener("mouseenter",()=>{addClass(hoverPanel,this.flipClass)});hoverPanel.addEventListener("mouseleave",()=>{removeClass(hoverPanel,this.flipClass)})}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>new JustFlipIt(el,options))}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>new JustFlipIt(el,options))}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};return justFlipIt});

package/dist/justFlipIt.js

@@ -1,11 +1,11 @@
 /*!
- * justFlipIt v3.0.0
+ * justFlipIt v3.1.0
  * https://github.com/SimHub/justFlipIt
  *
- * Copyright simon Lackmann
+ * Copyright SimHub
  * Released under the MIT license
  *
- * Date: 2023
+ * Date: 2025
  */
 
 (function (root, factory) {
@@ -170,7 +170,7 @@
           Duration: 400,
           Easing: "ease-in-out",
           preserveClasses: true, // NEU
-          preserveStyles: true   // NEU
+          preserveStyles: true, // NEU
         },
         options,
       );
@@ -188,6 +188,9 @@
         this.backClass = "backY";
       }
       this._init();
+      if (this.settings.Tilt) {
+        this._setupTilt();
+      }
       instanceMap.set(element, this);
     }
 
@@ -206,17 +209,28 @@
 
       // NEU: Klassen übernehmen (Panel, .front, .backY)
       if (this.settings.preserveClasses && originalElement.classList.length) {
-        originalElement.classList.forEach(cls => {
-          if (!hoverPanel.classList.contains(cls)) hoverPanel.classList.add(cls);
-          if (frontWrapper && !frontWrapper.classList.contains(cls)) frontWrapper.classList.add(cls);
-          if (backWrapper && !backWrapper.classList.contains(cls)) backWrapper.classList.add(cls);
+        originalElement.classList.forEach((cls) => {
+          if (!hoverPanel.classList.contains(cls)) {
+            hoverPanel.classList.add(cls);
+          }
+          if (frontWrapper && !frontWrapper.classList.contains(cls)) {
+            frontWrapper.classList.add(cls);
+          }
+          if (backWrapper && !backWrapper.classList.contains(cls)) {
+            backWrapper.classList.add(cls);
+          }
         });
       }
 
       // NEU: Inline-Styles übernehmen (nur auf Panel)
-      if (this.settings.preserveStyles && originalElement.getAttribute("style")) {
-        hoverPanel.setAttribute("style", (hoverPanel.getAttribute("style") || "") +
-          ";" + originalElement.getAttribute("style"));
+      if (
+        this.settings.preserveStyles && originalElement.getAttribute("style")
+      ) {
+        hoverPanel.setAttribute(
+          "style",
+          (hoverPanel.getAttribute("style") || "") +
+          ";" + originalElement.getAttribute("style"),
+        );
       }
 
       // Nur den INHALT übernehmen!
@@ -263,7 +277,31 @@
       this.backWrapper = backWrapper;
     }
 
+    _setupTilt() {
+      this.hoverPanel.addEventListener("mousemove", (e) => {
+        const rect = this.hoverPanel.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = ((y - centerY) / centerY) * 10;
+        const rotateY = (-(x - centerX) / centerX) * 10;
+
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+      });
+
+      this.hoverPanel.addEventListener("mouseenter", () => {
+        this.hoverPanel.style.transition = "all 0.2s ease-out";
+      });
+
+      this.hoverPanel.addEventListener("mouseleave", () => {
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
+        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      });
+    }
+
     _setupEvents(hoverPanel) {
+      if (this.settings.Tilt === 'only') return;
       if (this.settings.Click === true) {
         hoverPanel.addEventListener("click", (e) => {
           e.preventDefault();

package/dist/justFlipIt.min.js

@@ -1 +1 @@
-((e,s)=>{if("function"==typeof define&&define.amd)define(["jquery"],function(t){return s(t||e.jQuery||e.$)});else if("object"==typeof module&&module.exports){var i="undefined"!=typeof window?window.jQuery:void 0;if(!i)try{i=require("jquery")}catch(t){i=null}module.exports=s(i)}else e.justFlipIt=s(e.jQuery||e.$)})("undefined"!=typeof self?self:this,function(s){function a(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function n(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function e(t,e){var s,i;t.classList?t.classList.toggle(e):(0<=(i=(s=t.className.split(" ")).indexOf(e))?s.splice(i,1):s.push(e),t.className=s.join(" "))}let r=new WeakMap;class i{constructor(t,e={}){var s,i,n;document.querySelector('[data-justflipitstyle="justFlipIt_One"]')||((s=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_One"),s.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}",(i=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_Two"),i.textContent="._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}",(n=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_Transparent"),n.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}._justFlipIt_panel > * {box-sizing: border-box;}",document.head.appendChild(s),document.head.appendChild(i),document.head.appendChild(n)),this.element=t,this.settings=Object.assign({},{Template:"",Click:!1,FlipX:!1,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:!0,preserveStyles:!0},e),this.elementWidth=a(t,"width"),this.elementHeight=a(t,"height"),this.elementBackgroundColor=a(t,"background-color"),this.originalClassName=t.className,this.originalTagName=t.tagName.toLowerCase(),this.originalId=t.id||"",!0===this.settings.FlipX?(this.flipClass="_flip_",this.backClass="back"):(this.flipClass="_flipY_",this.backClass="backY"),this._init(),r.set(t,this)}_init(){var t=this.element;this.originalClassName;let s=document.createElement(this.originalTagName),e=(n(s,"hover"),n(s,"_justFlipIt_panel"),document.createElement("div")),i=(n(e,"front"),document.createElement("div"));n(i,this.backClass),this.settings.preserveClasses&&t.classList.length&&t.classList.forEach(t=>{s.classList.contains(t)||s.classList.add(t),e&&!e.classList.contains(t)&&e.classList.add(t),i&&!i.classList.contains(t)&&i.classList.add(t)}),this.settings.preserveStyles&&t.getAttribute("style")&&s.setAttribute("style",(s.getAttribute("style")||"")+";"+t.getAttribute("style")),e.innerHTML=t.innerHTML,this.settings.Template?i.innerHTML=this.settings.Template:i.innerHTML=t.innerHTML,t.parentNode.insertBefore(s,t),s.appendChild(e),s.appendChild(i),t.parentNode.removeChild(t),s.style.width=this.elementWidth,s.style.height=this.elementHeight,this.settings.Style&&this.settings.Style.length&&this.settings.Style.forEach(e=>{e.el&&("self"===e.el.toLowerCase()?Object.assign(s.style,e.style):s.querySelectorAll(e.el).forEach(t=>{Object.assign(t.style,e.style)}))}),this._setupEvents(s),this.hoverPanel=s,this.frontWrapper=e,this.backWrapper=i}_setupEvents(s){!0===this.settings.Click?s.addEventListener("click",t=>{t.preventDefault(),e(s,this.flipClass)}):"string"==typeof this.settings.Click?s.querySelectorAll(this.settings.Click).forEach(t=>{t.addEventListener("click",()=>{e(s,this.flipClass)})}):(s.addEventListener("mouseenter",()=>{n(s,this.flipClass)}),s.addEventListener("mouseleave",()=>{var t,e;t=s,e=this.flipClass,t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," ")}))}destroy(){var t=this.hoverPanel,e=t.querySelector(".front > *");e.className=this.originalClassName,t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t),r.delete(this.element)}}function t(t,e={}){var s;return"string"==typeof t?(s=document.querySelectorAll(t),Array.from(s).map(t=>new i(t,e))):t instanceof Element?new i(t,e):t.length?Array.from(t).map(t=>new i(t,e)):void 0}var l;return t.destroy=function(t){var e;"string"==typeof t?(e=document.querySelectorAll(t),Array.from(e).forEach(t=>{t=r.get(t);t&&t.destroy()})):t instanceof Element?(e=r.get(t))&&e.destroy():t.length&&Array.from(t).forEach(t=>{t=r.get(t);t&&t.destroy()})},s?(s.fn.justFlipIt=function(t){return this.each(function(){s.data(this,"plugin_justFlipIt")||s.data(this,"plugin_justFlipIt",new i(this,t))})},s.fn.destroy=function(){return this.each(function(){var t=r.get(this);t&&(t.destroy(),s.removeData(this,"plugin_justFlipIt"))})},(l=function(t,e){return"string"==typeof t||t instanceof Element?s(t).justFlipIt(e):t instanceof s?t.justFlipIt(e):void 0}).destroy=function(t){"string"==typeof t||t instanceof Element?s(t).destroy():t instanceof s&&t.destroy()},l):t});
+(function(root,factory){if(typeof define==="function"&&define.amd){define(["jquery"],function(jQuery){return factory(jQuery||root.jQuery||root.$)})}else if(typeof module==="object"&&module.exports){var jQuery=typeof window!=="undefined"?window.jQuery:undefined;if(!jQuery){try{jQuery=require("jquery")}catch(e){jQuery=null}}module.exports=factory(jQuery)}else{root.justFlipIt=factory(root.jQuery||root.$)}})(typeof self!=="undefined"?self:this,function(jQuery){"use strict";function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(function(prop){if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function applyAnimationSettings(element,duration,easing){const transitionValue=`all ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue;element.style.msTransition=transitionValue;element.style.OTransition=transitionValue}function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt_One"]')){return}const styleX=document.createElement("style");styleX.setAttribute("data-justflipitstyle","justFlipIt_One");styleX.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}"+"._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}";const styleY=document.createElement("style");styleY.setAttribute("data-justflipitstyle","justFlipIt_Two");styleY.textContent="._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}"+"._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}";const styleTransparent=document.createElement("style");styleTransparent.setAttribute("data-justflipitstyle","justFlipIt_Transparent");styleTransparent.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";document.head.appendChild(styleX);document.head.appendChild(styleY);document.head.appendChild(styleTransparent)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back"}else{this.flipClass="_flipY_";this.backClass="backY"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);if(this.settings.preserveClasses&&originalElement.classList.length){originalElement.classList.forEach(cls=>{if(!hoverPanel.classList.contains(cls)){hoverPanel.classList.add(cls)}if(frontWrapper&&!frontWrapper.classList.contains(cls)){frontWrapper.classList.add(cls)}if(backWrapper&&!backWrapper.classList.contains(cls)){backWrapper.classList.add(cls)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){this.hoverPanel.addEventListener("mousemove",e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=e.clientX-rect.left;const y=e.clientY-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`});this.hoverPanel.addEventListener("mouseenter",()=>{this.hoverPanel.style.transition="all 0.2s ease-out"});this.hoverPanel.addEventListener("mouseleave",()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"})}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();toggleClass(hoverPanel,this.flipClass)})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{toggleClass(hoverPanel,this.flipClass)})})}else{hoverPanel.addEventListener("mouseenter",()=>{addClass(hoverPanel,this.flipClass)});hoverPanel.addEventListener("mouseleave",()=>{removeClass(hoverPanel,this.flipClass)})}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>new JustFlipIt(el,options))}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>new JustFlipIt(el,options))}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};if(jQuery){jQuery.fn.justFlipIt=function(options){return this.each(function(){if(!jQuery.data(this,"plugin_justFlipIt")){jQuery.data(this,"plugin_justFlipIt",new JustFlipIt(this,options))}})};jQuery.fn.destroy=function(){return this.each(function(){const instance=instanceMap.get(this);if(instance){instance.destroy();jQuery.removeData(this,"plugin_justFlipIt")}})};var api=function(selector,options){if(typeof selector==="string"){return jQuery(selector).justFlipIt(options)}else if(selector instanceof Element){return jQuery(selector).justFlipIt(options)}else if(selector instanceof jQuery){return selector.justFlipIt(options)}};api.destroy=function(selector){if(typeof selector==="string"){jQuery(selector).destroy()}else if(selector instanceof Element){jQuery(selector).destroy()}else if(selector instanceof jQuery){selector.destroy()}};return api}return justFlipIt});

package/dist/types/justFlipIt.d.ts

@@ -34,6 +34,14 @@ declare namespace justFlipIt {
      * If true, all inline styles from the original element are copied to the flip panel (default: true)
      */
     preserveStyles?: boolean;
+
+    /**
+     * Enables 3D tilt effect. 
+     * - `true`: Combines flip and tilt.
+     * - `'only'`: Enables only tilt.
+     * - `false`: Disables tilt (default).
+     */
+    Tilt?: boolean | 'only';
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simhub2/justflipit",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "description": "A lightweight JavaScript library that allows you to implement CSS3 based flip animations on any DOM elements",
   "main": "dist/justFlipIt.js",
   "module": "dist/justFlipIt.js",

package/src/justFlipIt-combined.js

@@ -1,11 +1,11 @@
 /*!
- * justFlipIt v3.0.0
+ * justFlipIt v3.1.0
  * https://github.com/SimHub/justFlipIt
  *
- * Copyright simon Lackmann
+ * Copyright SimHub
  * Released under the MIT license
  *
- * Date: 2023
+ * Date: 2025
  */
 
 (function (root, factory) {
@@ -170,7 +170,7 @@
           Duration: 400,
           Easing: "ease-in-out",
           preserveClasses: true, // NEU
-          preserveStyles: true   // NEU
+          preserveStyles: true, // NEU
         },
         options,
       );
@@ -188,6 +188,9 @@
         this.backClass = "backY";
       }
       this._init();
+      if (this.settings.Tilt) {
+        this._setupTilt();
+      }
       instanceMap.set(element, this);
     }
 
@@ -206,17 +209,28 @@
 
       // NEU: Klassen übernehmen (Panel, .front, .backY)
       if (this.settings.preserveClasses && originalElement.classList.length) {
-        originalElement.classList.forEach(cls => {
-          if (!hoverPanel.classList.contains(cls)) hoverPanel.classList.add(cls);
-          if (frontWrapper && !frontWrapper.classList.contains(cls)) frontWrapper.classList.add(cls);
-          if (backWrapper && !backWrapper.classList.contains(cls)) backWrapper.classList.add(cls);
+        originalElement.classList.forEach((cls) => {
+          if (!hoverPanel.classList.contains(cls)) {
+            hoverPanel.classList.add(cls);
+          }
+          if (frontWrapper && !frontWrapper.classList.contains(cls)) {
+            frontWrapper.classList.add(cls);
+          }
+          if (backWrapper && !backWrapper.classList.contains(cls)) {
+            backWrapper.classList.add(cls);
+          }
         });
       }
 
       // NEU: Inline-Styles übernehmen (nur auf Panel)
-      if (this.settings.preserveStyles && originalElement.getAttribute("style")) {
-        hoverPanel.setAttribute("style", (hoverPanel.getAttribute("style") || "") +
-          ";" + originalElement.getAttribute("style"));
+      if (
+        this.settings.preserveStyles && originalElement.getAttribute("style")
+      ) {
+        hoverPanel.setAttribute(
+          "style",
+          (hoverPanel.getAttribute("style") || "") +
+          ";" + originalElement.getAttribute("style"),
+        );
       }
 
       // Nur den INHALT übernehmen!
@@ -263,7 +277,31 @@
       this.backWrapper = backWrapper;
     }
 
+    _setupTilt() {
+      this.hoverPanel.addEventListener("mousemove", (e) => {
+        const rect = this.hoverPanel.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = ((y - centerY) / centerY) * 10;
+        const rotateY = (-(x - centerX) / centerX) * 10;
+
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+      });
+
+      this.hoverPanel.addEventListener("mouseenter", () => {
+        this.hoverPanel.style.transition = "all 0.2s ease-out";
+      });
+
+      this.hoverPanel.addEventListener("mouseleave", () => {
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
+        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      });
+    }
+
     _setupEvents(hoverPanel) {
+      if (this.settings.Tilt === 'only') return;
       if (this.settings.Click === true) {
         hoverPanel.addEventListener("click", (e) => {
           e.preventDefault();

package/src/justFlipIt-combined.min.js

@@ -1 +1 @@
-((e,s)=>{if("function"==typeof define&&define.amd)define(["jquery"],function(t){return s(t||e.jQuery||e.$)});else if("object"==typeof module&&module.exports){var i="undefined"!=typeof window?window.jQuery:void 0;if(!i)try{i=require("jquery")}catch(t){i=null}module.exports=s(i)}else e.justFlipIt=s(e.jQuery||e.$)})("undefined"!=typeof self?self:this,function(s){function a(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function n(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function e(t,e){var s,i;t.classList?t.classList.toggle(e):(0<=(i=(s=t.className.split(" ")).indexOf(e))?s.splice(i,1):s.push(e),t.className=s.join(" "))}let r=new WeakMap;class i{constructor(t,e={}){var s,i,n;document.querySelector('[data-justflipitstyle="justFlipIt_One"]')||((s=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_One"),s.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}",(i=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_Two"),i.textContent="._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}",(n=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_Transparent"),n.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}._justFlipIt_panel > * {box-sizing: border-box;}",document.head.appendChild(s),document.head.appendChild(i),document.head.appendChild(n)),this.element=t,this.settings=Object.assign({},{Template:"",Click:!1,FlipX:!1,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:!0,preserveStyles:!0},e),this.elementWidth=a(t,"width"),this.elementHeight=a(t,"height"),this.elementBackgroundColor=a(t,"background-color"),this.originalClassName=t.className,this.originalTagName=t.tagName.toLowerCase(),this.originalId=t.id||"",!0===this.settings.FlipX?(this.flipClass="_flip_",this.backClass="back"):(this.flipClass="_flipY_",this.backClass="backY"),this._init(),r.set(t,this)}_init(){var t=this.element;this.originalClassName;let s=document.createElement(this.originalTagName),e=(n(s,"hover"),n(s,"_justFlipIt_panel"),document.createElement("div")),i=(n(e,"front"),document.createElement("div"));n(i,this.backClass),this.settings.preserveClasses&&t.classList.length&&t.classList.forEach(t=>{s.classList.contains(t)||s.classList.add(t),e&&!e.classList.contains(t)&&e.classList.add(t),i&&!i.classList.contains(t)&&i.classList.add(t)}),this.settings.preserveStyles&&t.getAttribute("style")&&s.setAttribute("style",(s.getAttribute("style")||"")+";"+t.getAttribute("style")),e.innerHTML=t.innerHTML,this.settings.Template?i.innerHTML=this.settings.Template:i.innerHTML=t.innerHTML,t.parentNode.insertBefore(s,t),s.appendChild(e),s.appendChild(i),t.parentNode.removeChild(t),s.style.width=this.elementWidth,s.style.height=this.elementHeight,this.settings.Style&&this.settings.Style.length&&this.settings.Style.forEach(e=>{e.el&&("self"===e.el.toLowerCase()?Object.assign(s.style,e.style):s.querySelectorAll(e.el).forEach(t=>{Object.assign(t.style,e.style)}))}),this._setupEvents(s),this.hoverPanel=s,this.frontWrapper=e,this.backWrapper=i}_setupEvents(s){!0===this.settings.Click?s.addEventListener("click",t=>{t.preventDefault(),e(s,this.flipClass)}):"string"==typeof this.settings.Click?s.querySelectorAll(this.settings.Click).forEach(t=>{t.addEventListener("click",()=>{e(s,this.flipClass)})}):(s.addEventListener("mouseenter",()=>{n(s,this.flipClass)}),s.addEventListener("mouseleave",()=>{var t,e;t=s,e=this.flipClass,t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," ")}))}destroy(){var t=this.hoverPanel,e=t.querySelector(".front > *");e.className=this.originalClassName,t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t),r.delete(this.element)}}function t(t,e={}){var s;return"string"==typeof t?(s=document.querySelectorAll(t),Array.from(s).map(t=>new i(t,e))):t instanceof Element?new i(t,e):t.length?Array.from(t).map(t=>new i(t,e)):void 0}var l;return t.destroy=function(t){var e;"string"==typeof t?(e=document.querySelectorAll(t),Array.from(e).forEach(t=>{t=r.get(t);t&&t.destroy()})):t instanceof Element?(e=r.get(t))&&e.destroy():t.length&&Array.from(t).forEach(t=>{t=r.get(t);t&&t.destroy()})},s?(s.fn.justFlipIt=function(t){return this.each(function(){s.data(this,"plugin_justFlipIt")||s.data(this,"plugin_justFlipIt",new i(this,t))})},s.fn.destroy=function(){return this.each(function(){var t=r.get(this);t&&(t.destroy(),s.removeData(this,"plugin_justFlipIt"))})},(l=function(t,e){return"string"==typeof t||t instanceof Element?s(t).justFlipIt(e):t instanceof s?t.justFlipIt(e):void 0}).destroy=function(t){"string"==typeof t||t instanceof Element?s(t).destroy():t instanceof s&&t.destroy()},l):t});
+(function(root,factory){if(typeof define==="function"&&define.amd){define(["jquery"],function(jQuery){return factory(jQuery||root.jQuery||root.$)})}else if(typeof module==="object"&&module.exports){var jQuery=typeof window!=="undefined"?window.jQuery:undefined;if(!jQuery){try{jQuery=require("jquery")}catch(e){jQuery=null}}module.exports=factory(jQuery)}else{root.justFlipIt=factory(root.jQuery||root.$)}})(typeof self!=="undefined"?self:this,function(jQuery){"use strict";function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(function(prop){if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function applyAnimationSettings(element,duration,easing){const transitionValue=`all ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue;element.style.msTransition=transitionValue;element.style.OTransition=transitionValue}function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt_One"]')){return}const styleX=document.createElement("style");styleX.setAttribute("data-justflipitstyle","justFlipIt_One");styleX.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}"+"._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}";const styleY=document.createElement("style");styleY.setAttribute("data-justflipitstyle","justFlipIt_Two");styleY.textContent="._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}"+"._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}";const styleTransparent=document.createElement("style");styleTransparent.setAttribute("data-justflipitstyle","justFlipIt_Transparent");styleTransparent.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";document.head.appendChild(styleX);document.head.appendChild(styleY);document.head.appendChild(styleTransparent)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back"}else{this.flipClass="_flipY_";this.backClass="backY"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);if(this.settings.preserveClasses&&originalElement.classList.length){originalElement.classList.forEach(cls=>{if(!hoverPanel.classList.contains(cls)){hoverPanel.classList.add(cls)}if(frontWrapper&&!frontWrapper.classList.contains(cls)){frontWrapper.classList.add(cls)}if(backWrapper&&!backWrapper.classList.contains(cls)){backWrapper.classList.add(cls)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){this.hoverPanel.addEventListener("mousemove",e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=e.clientX-rect.left;const y=e.clientY-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`});this.hoverPanel.addEventListener("mouseenter",()=>{this.hoverPanel.style.transition="all 0.2s ease-out"});this.hoverPanel.addEventListener("mouseleave",()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"})}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();toggleClass(hoverPanel,this.flipClass)})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{toggleClass(hoverPanel,this.flipClass)})})}else{hoverPanel.addEventListener("mouseenter",()=>{addClass(hoverPanel,this.flipClass)});hoverPanel.addEventListener("mouseleave",()=>{removeClass(hoverPanel,this.flipClass)})}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>new JustFlipIt(el,options))}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>new JustFlipIt(el,options))}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};if(jQuery){jQuery.fn.justFlipIt=function(options){return this.each(function(){if(!jQuery.data(this,"plugin_justFlipIt")){jQuery.data(this,"plugin_justFlipIt",new JustFlipIt(this,options))}})};jQuery.fn.destroy=function(){return this.each(function(){const instance=instanceMap.get(this);if(instance){instance.destroy();jQuery.removeData(this,"plugin_justFlipIt")}})};var api=function(selector,options){if(typeof selector==="string"){return jQuery(selector).justFlipIt(options)}else if(selector instanceof Element){return jQuery(selector).justFlipIt(options)}else if(selector instanceof jQuery){return selector.justFlipIt(options)}};api.destroy=function(selector){if(typeof selector==="string"){jQuery(selector).destroy()}else if(selector instanceof Element){jQuery(selector).destroy()}else if(selector instanceof jQuery){selector.destroy()}};return api}return justFlipIt});

package/src/justFlipIt-modern.js

@@ -1,11 +1,11 @@
 /*!
- * Modern justFlipIt v3.0.0
+ * justFlipIt v3.1.0
  * https://github.com/SimHub/justFlipIt
  *
- * Copyright simon Lackmann
+ * Copyright SimHub
  * Released under the MIT license
  *
- * Date: 2023
+ * Date: 2025
  */
 
 (function (root, factory) {
@@ -20,14 +20,13 @@
   "use strict";
 
   // Feature detection
-  const supportsGrid =
-    typeof CSS !== "undefined" &&
+  const supportsGrid = typeof CSS !== "undefined" &&
     CSS.supports &&
     CSS.supports("display", "grid");
-  const supportsWebAnimations =
-    typeof Element !== "undefined" && "animate" in Element.prototype;
-  const supportsCustomProperties =
-    window.CSS && CSS.supports && CSS.supports("color", "var(--test)");
+  const supportsWebAnimations = typeof Element !== "undefined" &&
+    "animate" in Element.prototype;
+  const supportsCustomProperties = window.CSS && CSS.supports &&
+    CSS.supports("color", "var(--test)");
 
   // Style generation based on browser support
   function generateStyles() {
@@ -218,7 +217,7 @@
           Duration: 400, // Animation duration in ms
           Easing: "ease-in-out", // Animation easing function
           preserveClasses: true, // NEU
-          preserveStyles: true   // NEU
+          preserveStyles: true, // NEU
         },
         options,
       );
@@ -250,6 +249,10 @@
       // Initialize flip
       this._init();
 
+      if (this.settings.Tilt) {
+        this._setupTilt();
+      }
+
       // Store instance
       instanceMap.set(element, this);
     }
@@ -269,17 +272,28 @@
 
       // NEU: Klassen übernehmen (Panel, .front, .backY)
       if (this.settings.preserveClasses && originalElement.classList.length) {
-        originalElement.classList.forEach(cls => {
-          if (!hoverPanel.classList.contains(cls)) hoverPanel.classList.add(cls);
-          if (frontWrapper && !frontWrapper.classList.contains(cls)) frontWrapper.classList.add(cls);
-          if (backWrapper && !backWrapper.classList.contains(cls)) backWrapper.classList.add(cls);
+        originalElement.classList.forEach((cls) => {
+          if (!hoverPanel.classList.contains(cls)) {
+            hoverPanel.classList.add(cls);
+          }
+          if (frontWrapper && !frontWrapper.classList.contains(cls)) {
+            frontWrapper.classList.add(cls);
+          }
+          if (backWrapper && !backWrapper.classList.contains(cls)) {
+            backWrapper.classList.add(cls);
+          }
         });
       }
 
       // NEU: Inline-Styles übernehmen (nur auf Panel)
-      if (this.settings.preserveStyles && originalElement.getAttribute("style")) {
-        hoverPanel.setAttribute("style", (hoverPanel.getAttribute("style") || "") +
-          ";" + originalElement.getAttribute("style"));
+      if (
+        this.settings.preserveStyles && originalElement.getAttribute("style")
+      ) {
+        hoverPanel.setAttribute(
+          "style",
+          (hoverPanel.getAttribute("style") || "") +
+          ";" + originalElement.getAttribute("style"),
+        );
       }
 
       // Nur den INHALT übernehmen!
@@ -326,7 +340,31 @@
       this.backWrapper = backWrapper;
     }
 
+    _setupTilt() {
+      this.hoverPanel.addEventListener("mousemove", (e) => {
+        const rect = this.hoverPanel.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = ((y - centerY) / centerY) * 10;
+        const rotateY = (-(x - centerX) / centerX) * 10;
+
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+      });
+
+      this.hoverPanel.addEventListener("mouseenter", () => {
+        this.hoverPanel.style.transition = "all 0.2s ease-out";
+      });
+
+      this.hoverPanel.addEventListener("mouseleave", () => {
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
+        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      });
+    }
+
     _setupEvents(hoverPanel) {
+      if (this.settings.Tilt === 'only') return;
       if (this.settings.Click === true) {
         hoverPanel.addEventListener("click", (e) => {
           e.preventDefault();

package/src/justFlipIt-modern.min.js

@@ -1 +1 @@
-((t,e)=>{"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():t.justFlipIt=e()})("undefined"!=typeof self?self:this,function(){"undefined"!=typeof CSS&&CSS.supports&&CSS.supports("display","grid");let a="undefined"!=typeof Element&&"animate"in Element.prototype;window.CSS&&CSS.supports&&CSS.supports("color","var(--test)");function i(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function r(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function s(t,e,s,i,r="ease-in-out"){a?t.animate([{transform:e},{transform:s}],{duration:i,easing:r,fill:"forwards"}):(t.style.transform=s,t.style.webkitTransform=s,t.style.mozTransform=s)}let n=new WeakMap;class o{constructor(t,e={}){var s;document.querySelector('[data-justflipitstyle="justFlipIt"]')||((s=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt"),s.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;position:relative;}._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}._justFlipIt_panel .back, ._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}._justFlipIt_panel .front{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}._justFlipIt_panel .back, ._justFlipIt_panel .backY{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}._justFlipIt_panel .back{transform:rotateX(-180deg);-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);}._justFlipIt_panel._flip_ .front{transform:rotateX(180deg);-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);}._justFlipIt_panel._flip_ .back{transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0);}._justFlipIt_panel .backY{transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);}._justFlipIt_panel._flipY_ .front{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}._justFlipIt_panel._flipY_ .backY{transform:rotateY(0);-webkit-transform:rotateY(0);-moz-transform:rotateY(0);}._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}._justFlipIt_panel > * {box-sizing: border-box;}",document.head.appendChild(s)),this.element=t,this.settings=Object.assign({},{Template:"",Click:!1,FlipX:!1,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:!0,preserveStyles:!0},e),this.elementWidth=i(t,"width"),this.elementHeight=i(t,"height"),this.elementBackgroundColor=i(t,"background-color"),this.originalClassName=t.className,this.originalTagName=t.tagName.toLowerCase(),this.originalId=t.id||"",!0===this.settings.FlipX?(this.flipClass="_flip_",this.backClass="back",this.rotateStart="rotateX(0deg)",this.rotateFront="rotateX(180deg)",this.rotateBack="rotateX(-180deg)",this.rotateReset="rotateX(0deg)"):(this.flipClass="_flipY_",this.backClass="backY",this.rotateStart="rotateY(0deg)",this.rotateFront="rotateY(180deg)",this.rotateBack="rotateY(-180deg)",this.rotateReset="rotateY(0deg)"),this._init(),n.set(t,this)}_init(){var t=this.element;this.originalClassName;let s=document.createElement(this.originalTagName),e=(r(s,"hover"),r(s,"_justFlipIt_panel"),document.createElement("div")),i=(r(e,"front"),document.createElement("div"));r(i,this.backClass),this.settings.preserveClasses&&t.classList.length&&t.classList.forEach(t=>{s.classList.contains(t)||s.classList.add(t),e&&!e.classList.contains(t)&&e.classList.add(t),i&&!i.classList.contains(t)&&i.classList.add(t)}),this.settings.preserveStyles&&t.getAttribute("style")&&s.setAttribute("style",(s.getAttribute("style")||"")+";"+t.getAttribute("style")),e.innerHTML=t.innerHTML,this.settings.Template?i.innerHTML=this.settings.Template:i.innerHTML=t.innerHTML,t.parentNode.insertBefore(s,t),s.appendChild(e),s.appendChild(i),t.parentNode.removeChild(t),s.style.width=this.elementWidth,s.style.height=this.elementHeight,this.settings.Style&&this.settings.Style.length&&this.settings.Style.forEach(e=>{e.el&&("self"===e.el.toLowerCase()?Object.assign(s.style,e.style):s.querySelectorAll(e.el).forEach(t=>{Object.assign(t.style,e.style)}))}),this._setupEvents(s),this.hoverPanel=s,this.frontWrapper=e,this.backWrapper=i}_setupEvents(t){!0===this.settings.Click?t.addEventListener("click",t=>{t.preventDefault(),this._toggleFlip()}):"string"==typeof this.settings.Click?t.querySelectorAll(this.settings.Click).forEach(t=>{t.addEventListener("click",()=>{this._toggleFlip()})}):(t.addEventListener("mouseenter",()=>{this._flip(!0)}),t.addEventListener("mouseleave",()=>{this._flip(!1)}))}_toggleFlip(){t=this.hoverPanel,e=this.flipClass;var t,e=t.classList?t.classList.contains(e):new RegExp("(^| )"+e+"( |$)","gi").test(t.className);this._flip(!e)}_flip(t){var e;t?(r(this.hoverPanel,this.flipClass),a&&(s(this.frontWrapper,this.rotateStart,this.rotateFront,this.settings.Duration,this.settings.Easing),s(this.backWrapper,this.rotateBack,this.rotateReset,this.settings.Duration,this.settings.Easing))):(t=this.hoverPanel,e=this.flipClass,t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," "),a&&(s(this.frontWrapper,this.rotateFront,this.rotateStart,this.settings.Duration,this.settings.Easing),s(this.backWrapper,this.rotateReset,this.rotateBack,this.settings.Duration,this.settings.Easing)))}destroy(){var t=this.hoverPanel,e=t.querySelector(".front > *");e.className=this.originalClassName,t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t),n.delete(this.element)}}function t(t,e={}){var s;return"string"==typeof t?(s=document.querySelectorAll(t),Array.from(s).map(t=>new o(t,e))):t instanceof Element?new o(t,e):t.length?Array.from(t).map(t=>new o(t,e)):void 0}return t.destroy=function(t){var e;"string"==typeof t?(e=document.querySelectorAll(t),Array.from(e).forEach(t=>{t=n.get(t);t&&t.destroy()})):t instanceof Element?(e=n.get(t))&&e.destroy():t.length&&Array.from(t).forEach(t=>{t=n.get(t);t&&t.destroy()})},t});
+(function(root,factory){if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory()}else{root.justFlipIt=factory()}})(typeof self!=="undefined"?self:this,function(){"use strict";const supportsGrid=typeof CSS!=="undefined"&&CSS.supports&&CSS.supports("display","grid");const supportsWebAnimations=typeof Element!=="undefined"&&"animate"in Element.prototype;const supportsCustomProperties=window.CSS&&CSS.supports&&CSS.supports("color","var(--test)");function generateStyles(){let baseStyles="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;position:relative;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}"+"._justFlipIt_panel .back, ._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .4s ease-in-out;}";let prefixedStyles="._justFlipIt_panel .front{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}"+"._justFlipIt_panel .back, ._justFlipIt_panel .backY{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;}";let xAxisStyles="._justFlipIt_panel .back{transform:rotateX(-180deg);-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);}"+"._justFlipIt_panel._flip_ .front{transform:rotateX(180deg);-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);}"+"._justFlipIt_panel._flip_ .back{transform:rotateX(0);-webkit-transform:rotateX(0);-moz-transform:rotateX(0);}";let yAxisStyles="._justFlipIt_panel .backY{transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);}"+"._justFlipIt_panel._flipY_ .front{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}"+"._justFlipIt_panel._flipY_ .backY{transform:rotateY(0);-webkit-transform:rotateY(0);-moz-transform:rotateY(0);}";let transparentStyle="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";return baseStyles+prefixedStyles+xAxisStyles+yAxisStyles+transparentStyle}function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt"]')){return}const styleElement=document.createElement("style");styleElement.setAttribute("data-justflipitstyle","justFlipIt");styleElement.textContent=generateStyles();document.head.appendChild(styleElement)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}function applyAnimationSettings(element,duration,easing){const transitionValue=`transform ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue}function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(prop=>{if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function animateFlip(element,start,end,duration,easing="ease-in-out"){if(supportsWebAnimations){const keyframes=[{transform:start},{transform:end}];const options={duration:duration,easing:easing,fill:"forwards"};return element.animate(keyframes,options)}else{element.style.transform=end;element.style.webkitTransform=end;element.style.mozTransform=end;return null}}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back";this.rotateStart="rotateX(0deg)";this.rotateFront="rotateX(180deg)";this.rotateBack="rotateX(-180deg)";this.rotateReset="rotateX(0deg)"}else{this.flipClass="_flipY_";this.backClass="backY";this.rotateStart="rotateY(0deg)";this.rotateFront="rotateY(180deg)";this.rotateBack="rotateY(-180deg)";this.rotateReset="rotateY(0deg)"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);if(this.settings.preserveClasses&&originalElement.classList.length){originalElement.classList.forEach(cls=>{if(!hoverPanel.classList.contains(cls)){hoverPanel.classList.add(cls)}if(frontWrapper&&!frontWrapper.classList.contains(cls)){frontWrapper.classList.add(cls)}if(backWrapper&&!backWrapper.classList.contains(cls)){backWrapper.classList.add(cls)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){this.hoverPanel.addEventListener("mousemove",e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=e.clientX-rect.left;const y=e.clientY-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`});this.hoverPanel.addEventListener("mouseenter",()=>{this.hoverPanel.style.transition="all 0.2s ease-out"});this.hoverPanel.addEventListener("mouseleave",()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"})}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();this._toggleFlip()})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{this._toggleFlip()})})}else{hoverPanel.addEventListener("mouseenter",()=>{this._flip(true)});hoverPanel.addEventListener("mouseleave",()=>{this._flip(false)})}}_toggleFlip(){const isFlipped=hasClass(this.hoverPanel,this.flipClass);this._flip(!isFlipped)}_flip(shouldFlip){if(shouldFlip){addClass(this.hoverPanel,this.flipClass);if(supportsWebAnimations){animateFlip(this.frontWrapper,this.rotateStart,this.rotateFront,this.settings.Duration,this.settings.Easing);animateFlip(this.backWrapper,this.rotateBack,this.rotateReset,this.settings.Duration,this.settings.Easing)}}else{removeClass(this.hoverPanel,this.flipClass);if(supportsWebAnimations){animateFlip(this.frontWrapper,this.rotateFront,this.rotateStart,this.settings.Duration,this.settings.Easing);animateFlip(this.backWrapper,this.rotateReset,this.rotateBack,this.settings.Duration,this.settings.Easing)}}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>{return new JustFlipIt(el,options)})}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>{return new JustFlipIt(el,options)})}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};return justFlipIt});

package/src/justFlipIt-vanilla.js

@@ -1,11 +1,11 @@
 /*!
- * Vanilla JS justFlipIt v3.0.0
+ * justFlipIt v3.1.0
  * https://github.com/SimHub/justFlipIt
  *
- * Copyright simon Lackmann
+ * Copyright SimHub
  * Released under the MIT license
  *
- * Date: 2023
+ * Date: 2025
  */
 
 (function (root, factory) {
@@ -163,7 +163,7 @@
           Duration: 400,
           Easing: "ease-in-out",
           preserveClasses: true, // NEU
-          preserveStyles: true   // NEU
+          preserveStyles: true, // NEU
         },
         options,
       );
@@ -181,6 +181,9 @@
         this.backClass = "backY";
       }
       this._init();
+      if (this.settings.Tilt) {
+        this._setupTilt();
+      }
       instanceMap.set(element, this);
     }
 
@@ -199,17 +202,28 @@
 
       // NEU: Klassen übernehmen (Panel, .front, .backY)
       if (this.settings.preserveClasses && originalElement.classList.length) {
-        originalElement.classList.forEach(cls => {
-          if (!hoverPanel.classList.contains(cls)) hoverPanel.classList.add(cls);
-          if (frontWrapper && !frontWrapper.classList.contains(cls)) frontWrapper.classList.add(cls);
-          if (backWrapper && !backWrapper.classList.contains(cls)) backWrapper.classList.add(cls);
+        originalElement.classList.forEach((cls) => {
+          if (!hoverPanel.classList.contains(cls)) {
+            hoverPanel.classList.add(cls);
+          }
+          if (frontWrapper && !frontWrapper.classList.contains(cls)) {
+            frontWrapper.classList.add(cls);
+          }
+          if (backWrapper && !backWrapper.classList.contains(cls)) {
+            backWrapper.classList.add(cls);
+          }
         });
       }
 
       // NEU: Inline-Styles übernehmen (nur auf Panel)
-      if (this.settings.preserveStyles && originalElement.getAttribute("style")) {
-        hoverPanel.setAttribute("style", (hoverPanel.getAttribute("style") || "") +
-          ";" + originalElement.getAttribute("style"));
+      if (
+        this.settings.preserveStyles && originalElement.getAttribute("style")
+      ) {
+        hoverPanel.setAttribute(
+          "style",
+          (hoverPanel.getAttribute("style") || "") +
+          ";" + originalElement.getAttribute("style"),
+        );
       }
 
       // Nur den INHALT übernehmen!
@@ -256,7 +270,31 @@
       this.backWrapper = backWrapper;
     }
 
+    _setupTilt() {
+      this.hoverPanel.addEventListener("mousemove", (e) => {
+        const rect = this.hoverPanel.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = ((y - centerY) / centerY) * 10;
+        const rotateY = (-(x - centerX) / centerX) * 10;
+
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
+      });
+
+      this.hoverPanel.addEventListener("mouseenter", () => {
+        this.hoverPanel.style.transition = "all 0.2s ease-out";
+      });
+
+      this.hoverPanel.addEventListener("mouseleave", () => {
+        this.hoverPanel.style.transform = `perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;
+        this.hoverPanel.style.transition = "all 0.5s ease-in-out";
+      });
+    }
+
     _setupEvents(hoverPanel) {
+      if (this.settings.Tilt === 'only') return;
       if (this.settings.Click === true) {
         hoverPanel.addEventListener("click", (e) => {
           e.preventDefault();

package/src/justFlipIt-vanilla.min.js

@@ -1 +1 @@
-((t,e)=>{"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():t.justFlipIt=e()})("undefined"!=typeof self?self:this,function(){function n(t,e){return window.getComputedStyle(t,null).getPropertyValue(e)}function a(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function e(t,e){var s,i;t.classList?t.classList.toggle(e):(0<=(i=(s=t.className.split(" ")).indexOf(e))?s.splice(i,1):s.push(e),t.className=s.join(" "))}let l=new WeakMap;class i{constructor(t,e={}){var s,i,a;document.querySelector('[data-justflipitstyle="justFlipIt_One"]')||((s=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_One"),s.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}",(i=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_Two"),i.textContent="._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}",(a=document.createElement("style")).setAttribute("data-justflipitstyle","justFlipIt_Transparent"),a.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}._justFlipIt_panel > * {box-sizing: border-box;}",document.head.appendChild(s),document.head.appendChild(i),document.head.appendChild(a)),this.element=t,this.settings=Object.assign({},{Template:"",Click:!1,FlipX:!1,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:!0,preserveStyles:!0},e),this.elementWidth=n(t,"width"),this.elementHeight=n(t,"height"),this.elementBackgroundColor=n(t,"background-color"),this.originalClassName=t.className,this.originalTagName=t.tagName.toLowerCase(),this.originalId=t.id||"",!0===this.settings.FlipX?(this.flipClass="_flip_",this.backClass="back"):(this.flipClass="_flipY_",this.backClass="backY"),this._init(),l.set(t,this)}_init(){var t=this.element;this.originalClassName;let s=document.createElement(this.originalTagName),e=(a(s,"hover"),a(s,"_justFlipIt_panel"),document.createElement("div")),i=(a(e,"front"),document.createElement("div"));a(i,this.backClass),this.settings.preserveClasses&&t.classList.length&&t.classList.forEach(t=>{s.classList.contains(t)||s.classList.add(t),e&&!e.classList.contains(t)&&e.classList.add(t),i&&!i.classList.contains(t)&&i.classList.add(t)}),this.settings.preserveStyles&&t.getAttribute("style")&&s.setAttribute("style",(s.getAttribute("style")||"")+";"+t.getAttribute("style")),e.innerHTML=t.innerHTML,this.settings.Template?i.innerHTML=this.settings.Template:i.innerHTML=t.innerHTML,t.parentNode.insertBefore(s,t),s.appendChild(e),s.appendChild(i),t.parentNode.removeChild(t),s.style.width=this.elementWidth,s.style.height=this.elementHeight,this.settings.Style&&this.settings.Style.length&&this.settings.Style.forEach(e=>{e.el&&("self"===e.el.toLowerCase()?Object.assign(s.style,e.style):s.querySelectorAll(e.el).forEach(t=>{Object.assign(t.style,e.style)}))}),this._setupEvents(s),this.hoverPanel=s,this.frontWrapper=e,this.backWrapper=i}_setupEvents(s){!0===this.settings.Click?s.addEventListener("click",t=>{t.preventDefault(),e(s,this.flipClass)}):"string"==typeof this.settings.Click?s.querySelectorAll(this.settings.Click).forEach(t=>{t.addEventListener("click",()=>{e(s,this.flipClass)})}):(s.addEventListener("mouseenter",()=>{a(s,this.flipClass)}),s.addEventListener("mouseleave",()=>{var t,e;t=s,e=this.flipClass,t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," ")}))}destroy(){var t=this.hoverPanel,e=t.querySelector(".front > *");e.className=this.originalClassName,t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t),l.delete(this.element)}}function t(t,e={}){var s;return"string"==typeof t?(s=document.querySelectorAll(t),Array.from(s).map(t=>new i(t,e))):t instanceof Element?new i(t,e):t.length?Array.from(t).map(t=>new i(t,e)):void 0}return t.destroy=function(t){var e;"string"==typeof t?(e=document.querySelectorAll(t),Array.from(e).forEach(t=>{t=l.get(t);t&&t.destroy()})):t instanceof Element?(e=l.get(t))&&e.destroy():t.length&&Array.from(t).forEach(t=>{t=l.get(t);t&&t.destroy()})},t});
+(function(root,factory){if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory()}else{root.justFlipIt=factory()}})(typeof self!=="undefined"?self:this,function(){"use strict";function addStyles(){if(document.querySelector('[data-justflipitstyle="justFlipIt_One"]')){return}const styleX=document.createElement("style");styleX.setAttribute("data-justflipitstyle","justFlipIt_One");styleX.textContent="._justFlipIt_panel {perspective:1000px;-webkit-perspective:1000px;-moz-perspective:1000px;}"+"._justFlipIt_panel .front{height:inherit;width:inherit;position:absolute;top:0;z-index:900;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel .back{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flip_ .front{z-index:900;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)}"+"._justFlipIt_panel._flip_ .back{z-index:1000;-webkit-transform:rotateX(0) rotateX(0);-moz-transform:rotateX(0) rotateX(0)}";const styleY=document.createElement("style");styleY.setAttribute("data-justflipitstyle","justFlipIt_Two");styleY.textContent="._justFlipIt_panel .backY{height:inherit;width:inherit;position:absolute;top:0;z-index:1000;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}"+"._justFlipIt_panel._flipY_ .front{z-index:900;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)}"+"._justFlipIt_panel._flipY_ .backY{z-index:1000;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0)}";const styleTransparent=document.createElement("style");styleTransparent.setAttribute("data-justflipitstyle","justFlipIt_Transparent");styleTransparent.textContent="._justFlipIt_panel {background: transparent !important; box-shadow: none !important;}"+"._justFlipIt_panel > * {box-sizing: border-box;}";document.head.appendChild(styleX);document.head.appendChild(styleY);document.head.appendChild(styleTransparent)}function getStyle(element,property){return window.getComputedStyle(element,null).getPropertyValue(property)}function addClass(element,className){if(element.classList){element.classList.add(className)}else{element.className+=" "+className}}function removeClass(element,className){if(element.classList){element.classList.remove(className)}else{element.className=element.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}function toggleClass(element,className){if(element.classList){element.classList.toggle(className)}else{var classes=element.className.split(" ");var existingIndex=classes.indexOf(className);if(existingIndex>=0){classes.splice(existingIndex,1)}else{classes.push(className)}element.className=classes.join(" ")}}function hasClass(element,className){if(element.classList){return element.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(element.className)}}function copyStyles(src,dest){const computed=window.getComputedStyle(src);const properties=["background","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","borderTop","borderRight","borderBottom","borderLeft","boxShadow","color","opacity"];properties.forEach(prop=>{if(computed[prop]&&computed[prop]!=="none"&&computed[prop]!=="initial"&&computed[prop]!==""){dest.style[prop]=computed[prop]}})}function applyAnimationSettings(element,duration,easing){const transitionValue=`all ${duration/1e3}s ${easing}`;element.style.transition=transitionValue;element.style.WebkitTransition=transitionValue;element.style.MozTransition=transitionValue;element.style.msTransition=transitionValue;element.style.OTransition=transitionValue}const instanceMap=new WeakMap;class JustFlipIt{constructor(element,options={}){addStyles();this.element=element;this.settings=Object.assign({},{Template:"",Click:false,FlipX:false,Style:[],Duration:400,Easing:"ease-in-out",preserveClasses:true,preserveStyles:true},options);this.elementWidth=getStyle(element,"width");this.elementHeight=getStyle(element,"height");this.elementBackgroundColor=getStyle(element,"background-color");this.originalClassName=element.className;this.originalTagName=element.tagName.toLowerCase();this.originalId=element.id||"";if(this.settings.FlipX===true){this.flipClass="_flip_";this.backClass="back"}else{this.flipClass="_flipY_";this.backClass="backY"}this._init();if(this.settings.Tilt){this._setupTilt()}instanceMap.set(element,this)}_init(){const originalElement=this.element;const originalClassName=this.originalClassName;const hoverPanel=document.createElement(this.originalTagName);addClass(hoverPanel,"hover");addClass(hoverPanel,"_justFlipIt_panel");const frontWrapper=document.createElement("div");addClass(frontWrapper,"front");const backWrapper=document.createElement("div");addClass(backWrapper,this.backClass);if(this.settings.preserveClasses&&originalElement.classList.length){originalElement.classList.forEach(cls=>{if(!hoverPanel.classList.contains(cls)){hoverPanel.classList.add(cls)}if(frontWrapper&&!frontWrapper.classList.contains(cls)){frontWrapper.classList.add(cls)}if(backWrapper&&!backWrapper.classList.contains(cls)){backWrapper.classList.add(cls)}})}if(this.settings.preserveStyles&&originalElement.getAttribute("style")){hoverPanel.setAttribute("style",(hoverPanel.getAttribute("style")||"")+";"+originalElement.getAttribute("style"))}frontWrapper.innerHTML=originalElement.innerHTML;if(this.settings.Template){backWrapper.innerHTML=this.settings.Template}else{backWrapper.innerHTML=originalElement.innerHTML}originalElement.parentNode.insertBefore(hoverPanel,originalElement);hoverPanel.appendChild(frontWrapper);hoverPanel.appendChild(backWrapper);originalElement.parentNode.removeChild(originalElement);hoverPanel.style.width=this.elementWidth;hoverPanel.style.height=this.elementHeight;if(this.settings.Style&&this.settings.Style.length){this.settings.Style.forEach(styleObj=>{if(styleObj.el){if(styleObj.el.toLowerCase()==="self"){Object.assign(hoverPanel.style,styleObj.style)}else{const targetElements=hoverPanel.querySelectorAll(styleObj.el);targetElements.forEach(el=>{Object.assign(el.style,styleObj.style)})}}})}this._setupEvents(hoverPanel);this.hoverPanel=hoverPanel;this.frontWrapper=frontWrapper;this.backWrapper=backWrapper}_setupTilt(){this.hoverPanel.addEventListener("mousemove",e=>{const rect=this.hoverPanel.getBoundingClientRect();const x=e.clientX-rect.left;const y=e.clientY-rect.top;const centerX=rect.width/2;const centerY=rect.height/2;const rotateX=(y-centerY)/centerY*10;const rotateY=-(x-centerX)/centerX*10;this.hoverPanel.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`});this.hoverPanel.addEventListener("mouseenter",()=>{this.hoverPanel.style.transition="all 0.2s ease-out"});this.hoverPanel.addEventListener("mouseleave",()=>{this.hoverPanel.style.transform=`perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)`;this.hoverPanel.style.transition="all 0.5s ease-in-out"})}_setupEvents(hoverPanel){if(this.settings.Tilt==="only")return;if(this.settings.Click===true){hoverPanel.addEventListener("click",e=>{e.preventDefault();toggleClass(hoverPanel,this.flipClass)})}else if(typeof this.settings.Click==="string"){const clickElements=hoverPanel.querySelectorAll(this.settings.Click);clickElements.forEach(el=>{el.addEventListener("click",()=>{toggleClass(hoverPanel,this.flipClass)})})}else{hoverPanel.addEventListener("mouseenter",()=>{addClass(hoverPanel,this.flipClass)});hoverPanel.addEventListener("mouseleave",()=>{removeClass(hoverPanel,this.flipClass)})}}destroy(){const hoverPanel=this.hoverPanel;const originalElement=hoverPanel.querySelector(".front > *");originalElement.className=this.originalClassName;hoverPanel.parentNode.insertBefore(originalElement,hoverPanel);hoverPanel.parentNode.removeChild(hoverPanel);instanceMap.delete(this.element)}}function justFlipIt(selector,options={}){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);return Array.from(elements).map(el=>new JustFlipIt(el,options))}else if(selector instanceof Element){return new JustFlipIt(selector,options)}else if(selector.length){return Array.from(selector).map(el=>new JustFlipIt(el,options))}}justFlipIt.destroy=function(selector){if(typeof selector==="string"){const elements=document.querySelectorAll(selector);Array.from(elements).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}else if(selector instanceof Element){const instance=instanceMap.get(selector);if(instance)instance.destroy()}else if(selector.length){Array.from(selector).forEach(el=>{const instance=instanceMap.get(el);if(instance)instance.destroy()})}};return justFlipIt});

package/src/justFlipIt.d.ts

@@ -34,6 +34,14 @@ declare namespace justFlipIt {
      * If true, all inline styles from the original element are copied to the flip panel (default: true)
      */
     preserveStyles?: boolean;
+
+    /**
+     * Enables 3D tilt effect. 
+     * - `true`: Combines flip and tilt.
+     * - `'only'`: Enables only tilt.
+     * - `false`: Disables tilt (default).
+     */
+    Tilt?: boolean | 'only';
   }
 
   /**