我如何通过将立方体的角弄圆来使立方体在外部变得完美,我看到一些额外的空间,如何去除立方体外部的额外空间。
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;
}
最佳答案
制作更合适的图像。这似乎是您可以使用具有尖锐边缘的多维数据集所能做的一切-这是(现在)可以通过CSS旋转实现的唯一类型。
另外-您的最后一个多维数据集将不会旋转:http://jsfiddle.net/ZrpLT/25/
谁知道为什么,因为MelonHTML5 3D Cube Gallery是一种商业产品,并且似乎没有免费提供的文档。
在最后一个框后放置<div data-caption="void" data-image="" style="display:none"></div>
似乎没有任何作用。而且,如果省略了style="display:none"
,则-尽管倒数第二个立方体现在旋转了-但它还会为您留下一个带有阴影的丑陋不可见盒子。
关于jquery - 多维数据集图像在3D动画中看起来不太好,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14409312/