Question

如何通过围绕立方体的角来使立方体在外部完美我看到一些额外的空间如何移除立方体外的额外空间。 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;

}

Answer 1

制作更合适的图像。对于具有锋利边缘的立方体而言，这似乎就是你所能做到的 - 这是你能够（现在）用CSS旋转实现的唯一一种。

此外 - 您的最后一个立方体不会旋转：http://jsfiddle.net/ZrpLT/25/

谁知道为什么，因为MelonHTML5 3D Cube Gallery是一个商业产品，它似乎没有免费提供的文档。

在最后一个框之后放置<div data-caption="void" data-image="" style="display:none"></div>似乎没有做任何事情。如果省略style="display:none"，那么 - 虽然当时最后一个立方体现在可以旋转 - 它会给你留下一个带阴影的丑陋的隐形框。

立方体图像在3d动画中看起来不太好

1 个答案: