Home/ Questions/Q 9149415
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T11:28:25+00:00

How can I make the cube perfect on the outside by rounding the corners

  • 0

How can I make the cube perfect on the outside by rounding the corners of the cube I see some additional space how can I remove the additional space outside the cube.
http://jsfiddle.net/ZrpLT/3/

<div class="top" style="-webkit-transform: rotateX(90deg) translateZ(75px); z-index: 1000;"><img src="http://www.defie.co/designerImages/thumbnails/inventory.png" width="150" height="150" style="margin-top: 0px;"></div>


div.melonhtml5_gallery div.cube {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    -ms-transition: -moz-transform 1s;

}

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Make better fitting images. That seems to be all you could possibly do with a cube with sharp edges – the only kind you can (now) achieve with CSS rotation.

    Also – your last cube won’t rotate: http://jsfiddle.net/ZrpLT/25/

    Who knows why, since MelonHTML5 3D Cube Gallery is a commercial product and it doesn’t seem to have freely available documentation.

    Placing <div data-caption="void" data-image="" style="display:none"></div> after the last box doesn’t seem to do anything. And if you omit the style="display:none", then – although the then-last cube now rotates – it leaves you with an additional ugly invisible box with shadow.

    • 0