0

如何在小立方体圆角中显示图像....灯箱中的图像是圆角....实际图像在这里

http://www.defie.co/designerImages/inventoryControl.png

http://jsfiddle.net/ZrpLT/91/

在下面提供我的代码

    <script type="text/javascript">
        Gallery.setOptions({
            size:     150,
            lightbox: true,
            //animation:  'drop'
            //speed:      500,
            //closeOnEsc: true,
            //slideshow:  false,
            //slideshow_speed: 3000,
            //cube_speed: 1000
        });
    </script>
    <style>
        body {
            background: #AAAAAA;
        }
    </style>
</head>
<body>
        <div class="row">
            <div class="span10">
                <div class="melonhtml5_gallery">
                                <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/inventoryControl.png"></div>



            </div>
        </div>
4

1 回答 1

0

如果我理解正确，您希望旋转立方体具有圆角，类似于图像但为 3D。

你可以给它一种圆角的感觉，但由于立方体旋转时背景中有图层，所以效果会失败。

div.melonhtml5_gallery div.cube div,
div.melonhtml5_gallery div.cube div img {
    border-radius: 10px;
}

这是 CSS3 中准圆角的类似尝试：http: //3dcube.pixelass.com/

CSS3 变换仅限于二维盒子上的矩阵变换，因此创建看起来像 3D 的对象通常是通过一些巧妙的技巧或幻觉来实现的。在这种情况下，当角落变圆时，这种错觉就会失败。要获得真正圆形的旋转立方体，我认为您必须使用 WebGL 之类的东西。

于 2013-01-26T07:33:11.140 回答