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 の変換は 2 次元ボックスのマトリックス変換に限定されているため、通常、3D に見えるオブジェクトの作成は巧妙なトリックまたはイリュージョンによって実現されます。この場合、角が丸くなっていると、その錯覚は失敗します。真に丸みを帯びた回転立方体を得るには、WebGL のようなものを使用する必要があると思います。

于 2013-01-26T07:33:11.140 に答える