Question

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

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

在下面提供我的代码

    <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>

Answer 1

如果我理解正确，您希望旋转立方体具有圆角，类似于图像但是在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的东西。

小立方体的圆角图像

1 个答案: