Question

http://www.melonhtml5.com/#gallery.js

我正在尝试为我的项目实现类似的代码。我只使用整个画廊的一个立方体复制代码并将其放入小提琴但不起作用我包括css和js

<div id="gallery" class="melonhtml5_gallery">
    <div class="size1" data-caption="Fans" data-image="http://www.melonhtml5.com/images/gallery/champ.jpg" style="width: 150px; height: 150px; z-index: 10;">
        <div class="cube" style="-webkit-transform: translateZ(-75px) rotateX(-180deg);">
            <div class="front" style="-webkit-transform: translateZ(75px); z-index: 100;">
                <img src="http://www.melonhtml5.com/images/gallery/champ.jpg" width="406.77966101694915" height="150" style="margin: 0px;">
            </div>
            <div class="back" style="-webkit-transform: rotateX(-180deg) translateZ(75px); z-index: 1000;">
                <img src="http://www.melonhtml5.com/images/gallery/champ.jpg" width="406.77966101694915" height="150" style="margin: 0px 0px 0px -256.77966101694915px;">
            </div>
            <div class="right" style="-webkit-transform: rotateY(90deg) translateZ(75px); z-index: 100;">
                <img src="http://www.melonhtml5.com/images/gallery/champ.jpg" width="406.77966101694915" height="150">
            </div>
            <div class="left" style="-webkit-transform: rotateY(-90deg) translateZ(75px); z-index: 100;">
                <img src="http://www.melonhtml5.com/images/gallery/champ.jpg" width="406.77966101694915" height="150" style="margin: 0px;">
            </div>
            <div class="top" style="-webkit-transform: rotateX(90deg) translateZ(75px); z-index: 100;">
                <img src="http://www.melonhtml5.com/images/gallery/champ.jpg" width="406.77966101694915" height="150" style="margin-left: -256.77966101694915px;">
            </div>
            <div class="bottom" style="-webkit-transform: rotateX(-90deg) translateZ(75px); z-index: 100;">
                <img src="http://www.melonhtml5.com/images/gallery/champ.jpg" width="406.77966101694915" height="150">
            </div>
        </div>
    </div>

3d立方体动画jquery

0 个答案: