Define width and height

[charlesravndal]

Hi! Is there a way to define a different width and height in an image? Since "size" only gives equal dimension to an image. Thanks!

[dmotz]

Currently only locked dimensions work (i.e. cubes), but I'll keep this issue open and look into it.

In the meantime you could use CSS and tweak the background-size property of the .hexaflip-cube .hexaflip-side selector to change the sizing of images within the cube faces.

[kermit524]

Hi, thanks for your plugin! I am instructed by my bosses to use it, on one of our projects: http://demo.zephyrww.co.il/lab/ but unfortunately I must implement it on a rectangle - where the width and height are not locked. Having told them it is not yet supported, my bosses have showed me this link: http://mustafademirkent.com/ Where you can see it implemented. I have been asked to implement it in the same way. Unfortunately, having tried to figure it out for the last couple of days, I am out of resources, and would very much appreciate your help.

[jasperjorna]

Hey, any news on this?

Thanks.

[srbetasign]

Hi, i find a solution by applying the following updates :

hexaflip.js
@@ -188,7 +188,14 @@
               return 'rotateY(90deg)';
           }
         })();
-        cube[side].style[css.transform] = (rotation + " translate3d(0, 0, " + (this.size / 2) + "px)") + (this.horizontalFlip ? 'rotateZ(90deg)' : '');
+        if(side=='top' || side =='bottom' && this.horizontalFlip){
+            var translate3DValue1 = (this.options.sizePlus - this.size) / 2;
+            var translate3DValue2 = this.options.sizePlus / 2;
+        }else{
+            var translate3DValue1 = 0;
+            var translate3DValue2 = this.size / 2;
+        }
+        cube[side].style[css.transform] = (rotation + " translate3d("+translate3DValue1+"px, 0, " + (translate3DValue2) + "px)") + (this.horizontalFlip ? 'rotateZ(90deg)' : '');
         cube[side].style.fontSize = this.fontSize;
         cube.holder.appendChild(cube[side]);
       }

So the option "sizePlus" should be added to set the width

Be aware that my example works only in horizontal mode.

It is possible to do the same modification for the vertical mode with the conditions : if(side=='right' || side =='left' && !this.horizontalFlip){